深刻理解BFC

時間 2019-11-10

標籤深刻理解 bfc 简体版

原文原文鏈接

1、什麼是BFC

Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。Block formatting context直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。通俗地講，BFC是一個容器，用於管理塊級元素。git

2、如何建立BFC

float爲 left|right
overflow爲 hidden|auto|scroll
display爲 table-cell|table-caption|inline-block|inline-flex|flex
position爲 absolute|fixed
根元素

3、BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置(即塊級元素獨佔一行)。
BFC的區域不會與float box重疊(利用這點能夠實現自適應兩欄佈局)。
內部的Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊(margin重疊三個條件:同屬於一個BFC;相鄰;塊級元素)。
計算BFC的高度時，浮動元素也參與計算。（清除浮動 haslayout）
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

4、 BFC有哪些特性

特性1：BFC會阻止垂直外邊距摺疊

按照BFC的定義，只有同屬於一個BFC時，兩個元素纔有可能發生垂直margin的重疊，這個包括相鄰元素或者嵌套元素，只要他們之間沒有阻擋（好比邊框、非空內容、padding等）就會發生margin重疊。github

①相鄰兄弟元素margin重疊問題

<style>
p{
        color: #fff;
        background: #888;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
  }
</style>
<body>
    <p>ABC</p>
    <p>abc</p>
</body>

上面例中兩個P元素之間距離本該爲200px,然而實際上只有100px,發生了margin重疊。遇到這種情形，咱們如何處理？
只須要在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。佈局

<style>
p{
        color: #fff;
        background: #888;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
.wrap{
  overflow:hidden;
}
</style>
<body>
   <p>ABC</p>
  <div class="wrap">
    <p>abc</p>
  </div>
</body>

②父子元素margin重疊問題

<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
  background:yellow;
}
.wrap h1{
  background:pink;
  margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
  <h1>h1</h1>
</div>
</body>

上圖wrap元素與h1元素之間l理論上本該有個40px的上下margin值,然而實際上父子元素並無存在margin值，與此同時，兩個div元素的間距爲40px。遇到這種情形，咱們如何處理？
處理方法其實有不少，在wrap元素中添加:overflow:hidden;或者overflow：auto；使其父元素造成一個BFC；也能夠在wrap元素中添加border：1px solid；或是padding：1px；這些均可以有效解決父子元素margin重疊問題。flex

特性2：BFC不會重疊浮動元素

利用這個特性，咱們能夠創造自適應兩欄佈局。spa

<style>
.box1{
  height: 100px;
  width: 100px;
  float: left;
  background: lightblue;
}
.box2{width: 200px;
  height: 200px;
  background: #eee;
}
</style>
<body>
<div class="box1">我是一個左浮動的元素</div>
<div class="box2">喂喂喂!你們不要生氣嘛，生氣會犯嗔戒的。悟空你也太調皮了，
我跟你說過叫你不要亂扔東西，你怎麼又……你看，我還沒說完你就把棍子給扔掉了!
月光寶盒是寶物，你把它扔掉會污染環境，要是砸到小朋友怎麼辦，就算砸不到小朋友，
砸到花花草草也是不對的。</div>
</body>

上圖中，文字圍繞着浮動元素排列，不過在這裏，這顯然不是咱們想要的。此時咱們能夠爲.box2元素的樣式加上overflow:hidden；使其創建一個BFC,讓其內容消除對外界浮動元素的影響。code

這個方法能夠用來實現兩列自適應佈局，效果不錯，此時左邊的寬度固定，右邊的內容自適應寬度。若是咱們改變文字的大小或者左邊浮動元素的大小，兩欄佈局的結構依然沒有改變！orm

特性3：BFC能夠包含浮動----清除浮動

咱們都知道浮動會脫離文檔流，接下來咱們看看下面的例子：blog

<style>
.box1{
  width:100px;
  height:100px;
  float:left;
  border: 1px solid #000;
}
.box2{
  width:100px;
  height:100px;
  float:left;
  border: 1px solid #000;
}
.box{
  background:yellow
}
</style>
<body>
<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
</div> 
</body>