理解BFC

什麼是BFC

直譯：塊級格式化上下文 -> Block fomatting context = block-level box + Formatting Context
解釋：BFC是一個獨立的渲染區域，只有Block-level box參與，它規定了內部元素如何佈局，並且與這個區域外部毫不相干。
BFC生成：CSS2.1中規定滿足下列CSS宣告之一的元素便會生成BFC
1. 根元素
2. float的值不為none
3. overflow的值不為visible(一般為hidden)
4. display的值為inline-block、table-cell、table-caption
5. position的值為absolute或fixed
BFC的約束條件
1. 內部的Box會在垂直方向上一個接一個的放置
2. 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊（塌陷），與方向無關。）
3. 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
4. BFC的區域不會與float的元素區域重疊
5. 計算BFC的高度時，浮動子元素也參與計算
6. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然

BFC在佈局中的應用

防止margin重疊

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
  <style>
    p {
      color: blue;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align: center;
      margin: 100px;
    }
  </style>
</head>
<body>
<p>hahaha</p>
<p>hehehe</p>
</body>
</html>

複製程式碼

現象：兩個p之間的距離為100px，傳送了margin重疊（塌陷）

解決：根據BFC佈局規則第二條

Box垂直方向的距離由margin決定。屬於同一個BFC(上例中是body根元素的BFC)的兩個相鄰Box的margin會發生重疊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
  <style>
    p {
      color: blue;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align: center;
      margin: 100px;
    }
    .xxx{
      overflow: hidden;
    }
  </style>
</head>
<body>
<p>hahaha</p>
<div class="xxx"><p>hehehe</p></div>
</body>
</html>

複製程式碼

結果：

清除內部浮動

程式碼：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BFC清浮動原理</title>
 <style type="text/css">
   .par {
     border: 5px solid #fcc;
     width: 300px;
     /*overflow: hidden;*/
   }
   .child {
     border: 5px solid #fffb60;
     float: left;
     width: 100px;
     height: 100px;
   }
 </style>
</head>
<body>
<div class="par">
 <div class="child"></div>
 <div class="child"></div>
</div>
</body>
</html>

複製程式碼

現象：

解決：根據BFC佈局規則第六條

計算BFC的高度時，浮動元素也參與計算

所以把par生成BFC，即把註釋去掉

結果：

自適應多欄佈局

程式碼：

   
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
</head>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
</html>

複製程式碼

現象：

解決：根據BFC佈局規則第四條

BFC的區域不會與float box重疊。

那就讓main生成BFC，這個新的BFC將不在於aside重疊

.main {
   overflow: hidden;
}

複製程式碼

結果：

自適應多欄佈局

類似前者,直接上圖

把中間元素生成BFC就可以了

總結

上面的例子都體現了

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

參考：史上最全面、最透徹的BFC原理剖析

理解BFC

什麼是BFC

BFC在佈局中的應用

相關文章