BFC的作用及原理

標籤：

瀏覽器對於BFC這塊地區的約束規則如下：

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

　　有道友對它做了分解，我們直接拿來：

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

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

• Block元素會擴充到與父元素同寬，所以block元素會垂直排列
• 垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不完全正確)
• 浮動元素會盡量接近往左上方（或右上方）
• 為父元素設定overflow：hidden或浮動父元素，則會包含浮動元素

BFC的作用及原理