BFC（塊級格式上下文）

時間 2019-12-10

標籤 bfc 格式上下文简体版

原文原文鏈接

BFC的生成css

知足下列css聲明之一的元素便會生成BFChtml

根元素
float的值不爲none
overflow的值不爲visible
display的值爲inline-block、table-cell、table-caption
position的值爲absolute或fixed

BFC的約束規則chrome

瀏覽器對BFC這塊區域的約束規則以下：瀏覽器

生成BFC元素的子元素會一個接一個的放置，垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
生成BFC元素的子元素中，每個子元素左外邊距與包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距接觸右邊界），即便浮動元素也是如此（儘管子元素的內容區域會由浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）

有道友對它作了分解，咱們直接拿來：數據結構

內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

　　看到以上的幾條約束，讓我想起學習css時的幾條規則佈局

Block元素會擴展到與父元素同寬，因此block元素會垂直排列
垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不徹底正確)
浮動元素會盡可能接近往左上方（或右上方）
爲父元素設置overflow：hidden或浮動父元素，則會包含浮動元素
......

BFC在佈局中的應用學習

防止margin重疊：測試

　　同一個BFC中的兩個相鄰Box纔會發生重疊與方向無關，不過因爲上文提到的第一條限制，咱們甚少看到水平方向的margin重疊。這在IE中是個例外，IE能夠設置write-mode。下面這個demo來自寒冬大神的博客。ui

<!doctype HTML>
<html>
<head>
<style type="text/css"> #green { margin:10px 10px 10px 10px } #blue { margin:10px 10px 10px 10px } #red { margin:10px 10px 10px 10px } body { writing-mode:tb-rl;
    }

</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

能夠看到水平方向的margin發生了重疊。spa

要阻止margin重疊，只要將兩個元素別放在一個BFC中便可（能夠用上文提到的方式讓相鄰元素其中一個生成BFC）。阻止兩個相鄰元素的margin重疊看起來沒有什麼意義，主要用於嵌套元素。

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0;
    } .first{ margin:20px; background:lightgreen; width:100px; height:100px;
    } ul{
      /*display:inline-block;*/ margin:10px; background:lightblue;
    } li{ margin:25px;
    }
  </style> 
  
  
</head> 

<body class="claro"> 
  <div class="first"></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body> 

</html>

此時div與ul之間的垂直距離，取div、ul、li三者之間的最大外邊距。

要阻止嵌套元素的重疊，只需讓ul生成BFC便可（將上例中的註釋去掉），這樣div、ul、li之間便不會發生重疊現象。而li位於同一BFC內因此仍然存在重疊現象。

須要注意的是：

若是將爲ul使用overflow：hidden的方式，ul生成BFC不該該再發生重疊現象但是我在chrome、firefox、ie上的測試結果都有發生重疊現象。這個問題，我沒找到答案，還請道友們給解答一下
若是爲ul設置了border或padding，那元素的margin便會被包含在父元素的盒式模型內，不會與外部div重疊。《CSS權威指南》中提到塊級正常流元素的高度設置爲auto，並且只有塊級子元素，其默認高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。若是塊級元素右上內邊距或下內邊距，或者有上邊框或下邊框，其高度是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離。

浮動相關問題：

　　使得父元素包含子元素，常見的方式是爲父元素設置overflow:hidden或浮動父元素。根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題。實際上只要讓父元素生成BFC便可，並不僅有這兩種方式。

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0;
    } .first{ margin:20px; background:lightgreen; border: 2px solid lightgreen;
      /*display:inline-block;*/
      /*overflow:hidden;*/
      /*float: left;*/
      /*position: absolute;*/
    } ul{ overflow:hidden; margin:10px; background:lightblue; width:100px; height:200px; float: left;
    } li{ margin:25px;
    }
  </style>   
</head> 
<body class="claro"> 
  <div class="first">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>  
</body> 
</html>

將上例中first中任意一項註釋去掉均可以獲得包圍浮動的效果，其中overflow：hidden方式，與正常流最接近。

關於清除浮動更詳盡的方式，請你們參考這篇文章此處，dolphinX道友的博客簡潔明瞭。

　　多欄佈局的一種方式

　　上文提到的一條規則：與浮動元素相鄰的已生成BFC的元素不能與浮動元素相互覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式。

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>

  <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .left{ background:pink; float: left; width:180px;
    } .center{ background:lightyellow; overflow:hidden;
      
    } .right{ background: lightblue; width:180px; float:right;
    }
  </style> 
  
  
</head> 

<body class="claro"> 
  <div class="container">
    <div class="left">
      <pre> .left{ background:pink; float: left; width:180px; } </pre>
    </div>
    <div class="right">
       <pre> .right{ background:lightblue; width:180px; float:right; } </pre>
    </div>
    <div class="center">
    <pre> .center{ background:lightyellow; overflow:hidden; height:116px; } </pre>
    </div>
  </div>

</html>

這種佈局的特色在於左右兩欄寬度固定，中間欄能夠根據瀏覽器寬度自適應。

IE中也有與BFC相似的概念成爲hasLayout,我平時工做最低也是使用IE8，並無涉及到這部分因此還請道友們查詢其餘資料。

　　總結

　　在我第一次接觸到BFC時常常有一個疑問，BFC的結構是什麼樣的，像DOM同樣的樹狀結構，仍是一個BFC集合。其實咱們不須要關心BFC的具體結構，這要看瀏覽器的具體實現採用什麼樣的數據結構。對於BFC咱們只須要知道使用必定的CSS聲明能夠生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則能夠達到必定的佈局效果，爲了達到特定的佈局效果咱們讓元素生成BFC。

　　對於CSS新手來講不建議涉獵BFC，仍是應該去看看相應的CSS佈局規則，像《CSS設計指南》、《CSS權威指南》這兩本都很不錯，達到必定積累再來看BFC，說不定會有一種豁然開朗的感受。BFC中幾乎涉及到CSS佈局的全部重要屬性，這也是BFC的難點和咱們須要掌握BFC的意義所在。

　　文章中的部份內容可能與道友看到的其餘博客有所出入，畢竟每一個人的工做經驗、所遇問題跟測試方法不同，差別在所不免，探討技術的樂趣在於不斷的總結積累與自我推翻，只要大方向正確細節問題能夠慢慢探索。