爲何設置overflow爲hidden能夠清除浮動帶來的影響

時間 2019-12-11

標籤爲何設置 overflow hidden 能夠清除浮動帶來影響简体版

原文原文鏈接

1.問題起源　　html

　　在平時的業務開發寫CSS中，爲了知足頁面佈局，元素的浮動特性咱們用的不能再多了。使用浮動的確可以解決一些佈局問題，可是也帶了一些反作用影響，好比，父元素高度塌陷，咱們有好幾種能夠清除浮動的方法，最經常使用的就是設置父元素的overflow:hidden這個屬性，每次在寫代碼的時候老是這樣寫，可是，本身從沒深度思考過這些寫爲何可以清除浮動，最近，本身也查閱了一些資料，談談本身的理解。佈局

2.情景再現spa

先上代碼：3d

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮動</title>
  <style>
    .container{
      border: 1px solid #000;
　　   background: #0f0;
    }
   .child{
     float: left;
   }
  </style>
</head>
<body>
<div class="container">
 <div class="child">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam dolorem eligendi laudantium libero magnam magni numquam voluptas voluptatem voluptatibus? Consequuntur delectus dolorem esse explicabo minus neque non quaerat voluptatum!
 </div>
</div>
</body>
</html>

代碼很簡單，就是父元素container裏面包含了一個子div元素child，而後咱們使子元素的div向左浮動，頁面展現效果以下：code

結果來看，父元素只顯示了四個方向邊框的高度，背景顏色未顯示，這是由於子元素浮動脫離文檔流形成父元素高度塌陷。orm

3.解決方法htm

**
 .container{
      border: 1px solid #000;
      background: #0f0;
      overflow: hidden;
    }
**

只在container父元素加了一行overflow:hiddenblog

頁面展現效果以下：ip

父元素高度被撐起來了，背景顏色也顯示出來了。ci

4.BFC概念

咱們先了解一個名詞：BFC（block formatting context），中文爲「塊級格式化上下文」。

先記住一個原則：若是一個元素具備BFC,那麼內部元素再怎麼翻江倒海，翻雲覆雨，都不會影響外面的元素。因此，BFC元素是不可能發生margin重疊的，由於margin重疊會影響外面的元素的；BFC元素也能夠用來清楚浮動帶來的影響，由於若是不清楚，子元素浮動則會形成父元素高度塌陷，必然會影響後面元素的佈局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。

如下狀況會觸發BFC: