關於CSS裏BFC特性的理解和應用

時間 2019-11-10

標籤關於 css bfc 特性理解應用欄目 CSS 简体版

原文原文鏈接

什麼是BFC（Block Formatting Context）

Formatting context(格式化上下文) 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。

而 Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。具備 BFC 特性的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器所沒有的一些特性。css

BFC的佈局規則以下：
1. 內部的盒子會在垂直方向，一個個地放置；
2. BFC是頁面上的一個隔離的獨立容器；
3. 屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
4. 計算BFC的高度時，浮動元素也參與計算
5. 每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；
6. BFC的區域不會與float重疊；html

那麼如何觸發 BFC呢？只要元素知足下面任一條件便可觸發 BFC 特性：wordpress

body 根元素；
浮動元素：float 不爲none的屬性值；
絕對定位元素：position (absolute、fixed)
display爲： inline-block、table-cells、flex
overflow 除了visible之外的值 (hidden、auto、scroll)

BFC到底有什麼卵用呢？

塊格式化上下文對於定位與清除浮動很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。佈局

一、同一個 BFC 下外邊距會發生摺疊
也就是說，兩個相鄰的普通流中的塊元素垂直方向上的 margin會摺疊。flex

<style>
.p {  
  width:200px;  
  height:50px;  
  margin:100px 0;  
  background-color:red;  
}  
</style>

<body>
   <div class="p"></div>  
   <div class="p"></div>  
</body>

這裏兩個div的外邊距爲100px，而不是200px。之因此發生外邊距摺疊，是由於他們同屬於 body這個根元素。spa

利用BFC能夠消除Margin Collapse
BFC致使了margin collapse，而如今又要用它來解決margin cllapse.可是始終要記住一點：只有當元素在同一個BFC中時，垂直方向上的margin纔會clollpase.若是它們屬於不一樣的BFC，則不會有margin collapse.所以咱們能夠再創建一個BFC去阻止margin collpase的發生。code

<div class="p"></div>  

<div class="wrap">  
  <div class="p"></div>  
</div> 

.wrap {  
  overflow:hidden; 
} 
.p {  
  width:200px;  
  height:50px;  
  margin:100px 0;  
  background-color:red; 
}

二、 BFC 能夠包含浮動的元素（清除浮動）
正常狀況下，浮動的元素會脫離普通文檔流，使父元素高度坍塌。即外層的div會沒法包含內部浮動的div。orm

<div style="border: 1px solid #000;">
    <div style="width: 50px; height: 50px; background: #eee;float: left;">
    </div>
</div>

但若是咱們觸發外部容器的BFC，根據BFC規範中的第4條：計算BFC的高度時，浮動元素也參與計算，那麼外部div容器就能夠包裹着浮動元素。htm

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

三、BFC 能夠阻止元素被浮動元素覆蓋/（兩欄佈局）
rem

大多數狀況(若沒有特殊設置)，第二個元素有部分被浮動元素所覆蓋，(可是文本信息不會被浮動元素所覆蓋) ，文本將會環繞浮動元素(如Figure 1)；但有時候這並非咱們指望的，咱們想要的是Figure2。
若是想避免元素被覆蓋，可觸第二個元素的 BFC 特性，在第二個元素中加入 overflow: hidden