塊級格式化上下文(BFC)

時間 2019-11-21

標籤格式化上下文 bfc 简体版

原文原文鏈接

1、什麼是BFC佈局

具備BFC屬性的元素也屬於普通流定位方式，與普通容器沒有什麼區別，可是在功能上，具備BFC的元素能夠看作是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且具備普通容器沒有的一些特性，好比包含浮動元素，以防止出現高度塌陷問題。flex

總之，BFC就是一種屬性，這種屬性會影響着元素的定位及與其兄弟元素之間的相互做用。spa

2、BFC的用途3d

從總體上看，BFC是隔離了的容器：code

一、BFC會阻止外邊距摺疊blog

摺疊：兩個相鄰的盒子（多是兄弟關係也多是祖先關係）的垂直外邊距能夠合併成一個單獨的垂直外邊距。這種合併外邊距的方式被稱爲摺疊。圖片

在同一個BFC中，兩個相鄰的塊級元素在垂直方向上的外邊距會發生疊加，具體的疊加規則以下：文檔

當兩個塊級元素的外邊距都爲正數時，取較大者
當兩個塊級元素的外邊距都爲負數時，取較大者
當一正一負時，爲二者的和
根據上面的定義可知，發生摺疊的條件是：兩個塊級元素位於同一個BFC中，於是要阻止外邊距摺疊只須要產生新的BFC。it

建立了BFC的元素，不和它的子元素髮生外邊距摺疊。於是若是同一級中的塊級元素髮生摺疊狀況(兄弟關係)，不能在元素自己上產生BFC屬性，而應該給任意一個元素新建一個BFC容器(新增父級元素並設置爲新的BFC，例如設置overflow:hidden;)。若是是祖先關係，則只須要觸發父級BFC。io

A、兄弟關係外邊距摺疊

<!--兄弟關係摺疊-->
<head>
  <style>
    div:nth-child(1){
      margin:20px;
    }
    div:nth-child(2){
      margin:40px;
    }
    div:nth-child(3){
      margin:20px;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background:#123;"></div>
    
  <div style="width:100px;height:100px;background:#496;"></div>

  <div style="width:100px;height:100px;background:#789;"></div>
</body>

/*兄弟關係阻止摺疊方法*/
<head>
  <style>
    .newBFC{
      margin:40px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div style="width:100px;height:100px;background:#123;margin:20px;"></div>
  <!-- newBFC類表示的仍然和上下兩個div在同一個BFC容器中，於是仍舊會發生外邊距摺疊。不過其子元素已經位於另一個BFC容器中，其與父元素的邊距不會摺疊 -->
  <div class="newBFC">
    <div style="width:100px;height:100px;background:#496;margin:20px;"></div>
  </div>
  <div style="width:100px;height:100px;background:#789;margin:20px;"></div>
</body>

B、祖先關係摺疊

<!--外層div與內層div的垂直外邊距margin合併了-->
<div style="margin:30px">
  <div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>

<!--將觸發父級BFC屬性，就不會合並垂直外邊距了-->
<div style="margin:30px；overflow:hidden;">
  <div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>

二、BFC能夠包含浮動元素

<div style="border:2px solid red;">
  <div class="child" style="width:100px;height:100px;background:#565;"></div>
</div>

未給child加float屬性前：

給child加float屬性後：

從上面兩個對比圖能夠發現，加了float屬性後，包含child類的div脫離普通/標準文檔流，外層div高度塌陷。

觸發BFC

<div style="border:2px solid red;overflow: hidden;">
    <div style="width:100px;height:100px;background:#565;float: right;"></div>
</div>

使用overflow: hidden;觸發BFC屬性，就能夠承載具備float屬性的元素了。

三、BFC能夠阻止元素被浮動元素覆蓋

浮動元素的塊級兄弟元素會無視浮動元素的位置，儘可能佔滿一整行，這樣就會被浮動元素覆蓋，爲該兄弟元素觸發BFC後能夠阻止這種狀況的發生。常常在佈局中使用。

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;">
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>

觸發BFC

<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;overflow: hidden;">
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
  <p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>