理解CSS中的BFC(塊級(jí)可視化上下文)[譯]_html/css

一些元素，如float元素，如position為absolute,inline-block,table-cell或table-caption的元素，以及overflow屬性不為visible的元素，它們將會(huì)建立一個(gè)新的塊級(jí)格式化上下文。

上述定義已經(jīng)很詳細(xì)的描述了塊級(jí)格式化上下文(Block Formatting Context)是如何形成的，為了方便起見(jiàn)，文中均用BFC代替。現(xiàn)在，讓我們用一種簡(jiǎn)單的方式對(duì)其進(jìn)行重新定義:
BFC也是HTML中的一個(gè)盒子（看不見(jiàn)而已），只有滿足至少下列條件之一才能形成BFC:

HTML代碼如下：

 Some Content here

我們可以用CSS為container容器附加上述條件,如overflow: scroll, overflow: hidden, display: flex, float: left, or display: table.盡管這些條件都能形成一個(gè)BFC，但是它們各自卻有著不一樣的表現(xiàn)：

這么看來(lái)，建立BFC的最好方式莫過(guò)于overflow:hidden了：

.container { overflow: hidden; }

在BFC中，塊級(jí)元素又是怎么布局的呢？

W3C規(guī)范描述如下：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).bfcbfc.jpg

簡(jiǎn)單的說(shuō)：上圖中所有屬于BFC的box都默認(rèn)左對(duì)齊，并且它們的左邊距可以觸及到容器container的左邊。最后一個(gè)box，盡管它是浮動(dòng)的，但它依然遵循這個(gè)原則。（BFC中的浮動(dòng)下面會(huì)介紹）

－那么，BFC到底有什么卵用呢？

－實(shí)際上，真的特別有用

1.利用BFC可以消除Margin Collapse

在正常情況下，在一個(gè)容器內(nèi)的所有box將會(huì)由上至下依次垂直排列，即我們所說(shuō)的一個(gè)元素占一行，并切垂直相鄰的距離(即margin)是由各自的margin決定的，而不是兩個(gè)margin的疊加。

讓我們看一個(gè)例子：紅色的div包含三個(gè)綠色的p元素。

HTML代碼：

 
Sibling 1
 
Sibling 2
 
Sibling 3

CSS代碼：

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { background-color: lightgreen; margin: 10px 0; }

理想情況下，我們會(huì)認(rèn)為p標(biāo)簽之間的margin應(yīng)該是它們的和(20px),但實(shí)際上卻是10px.這其實(shí)是collapsing margins。

結(jié)果如下：

這似乎讓人有點(diǎn)困惑，BFC導(dǎo)致了margin collapse，而現(xiàn)在又要用它來(lái)解決margin cllapse.但是始終要記住一點(diǎn)：只有當(dāng)元素在同一個(gè)BFC中時(shí)，垂直方向上的margin
才會(huì)clollpase.如果它們屬于不同的BFC，則不會(huì)有margin collapse.因此我們可以再建立一個(gè)BFC去阻止margin collpase的發(fā)生。

現(xiàn)在HTML變成：

 
Sibling 1
 
Sibling 2
 
Sibling 3
 

CSS也有改變：

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { margin: 10px 0; background-color: lightgreen; }.newBFC { overflow: hidden; /* creates new block formatting context */ }

現(xiàn)在的結(jié)果為：

由于第二個(gè)p元素和第三個(gè)p元素屬于不同的BFC，因此避免了margin collapse.

我相信大家經(jīng)常會(huì)遇到一個(gè)容器里有浮動(dòng)元素，但是這個(gè)容器的高度卻是0的場(chǎng)景，如下圖：

看下面的例子：

HTML:

 Sibling Sibling 

CSS:

.container { background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }

結(jié)果：

在上邊的情形中，container是不會(huì)有高度的，因?yàn)樗烁?dòng)元素。通常我們解決這個(gè)問(wèn)題的辦法是利用一個(gè)偽元素去實(shí)現(xiàn)clear fix，但是現(xiàn)在我們有了更好的解決辦法，即利用BFC，因?yàn)樗鼔蛉菁{浮動(dòng)元素的。
我們現(xiàn)在讓container形成BFC規(guī)則，結(jié)果如下：

.container { overflow: hidden; /* creates block formatting context */ background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }

結(jié)果：

有時(shí)候，確切的說(shuō)大多數(shù)情況(若沒(méi)有特殊設(shè)置)，文本將會(huì)環(huán)繞浮動(dòng)元素(如Figure 1),
但有時(shí)候這并不是我們期望的，我們想要的是Figure2。

往往可能大家都會(huì)選擇利用margin－left來(lái)強(qiáng)行讓p的容器有一個(gè)左邊距，而距離恰好為Floated div的寬度，但現(xiàn)在我們可以利用BFC更好的解決這個(gè)問(wèn)題。

首先讓我們了解一下文本換行的原理吧：

在Figure1中，整個(gè)p元素實(shí)際上是處于上圖中的黑色區(qū)域，p元素沒(méi)有移動(dòng)是因?yàn)樗诟?dòng)元素的下方。但實(shí)際上p作為行塊級(jí)別的元素（相對(duì)于行內(nèi)文本）卻發(fā)生了移動(dòng)，因?yàn)橐ofloat元素’騰’位置，而隨著文本的增加，文本高度超過(guò)浮動(dòng)元素的部分則不會(huì)在水平方向上收縮內(nèi)部距離，因此看起來(lái)像是環(huán)繞。

如圖：

在解決這個(gè)問(wèn)題之前，我們先來(lái)看一下W3C的規(guī)范在這方面的描述：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

W3C為這種情況提供了一個(gè)解決方案：unless the box establishes a new block formatting context，即為p建立BFC。

結(jié)果：

注：此文為譯文
blog請(qǐng)戳
原文請(qǐng)戳

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com