BFC的概念
BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以及與其他元素的關(guān)系和相互作用。通俗的講，就是一個div內(nèi)部，我們用float和margin布局元素。
BFC布局規(guī)則：
1.內(nèi)部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區(qū)域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
創(chuàng)建一個BFC
一個BFC可以被顯式的觸發(fā)。如果想要創(chuàng)建一個新的BFC，只需要給它添加上面提到的任何一個CSS樣式就可以了。
例如，請看下面的 HTML ：
一個新的BFC可以通過給容器添加任何一個觸發(fā)BFC的CSS樣式，如 overflow: scroll , overflow: hidden , display: flex , float: left ,或者 display: table 來創(chuàng)建。
display:table 可能會產(chǎn)生一些問題
overflow:scroll 可能會顯示不必要的滾動條
float:left 將會把元素置于容器的左邊，其他元素環(huán)繞著它
overflow:hidden 將會剪切掉溢出的元素
所以每當想要創(chuàng)建一個新的BFC的時候，我們會基于我們的需求選擇最好的樣式條件。為了一致性，我在這篇文章所給出的例子中全部使用了 overflow: hidden
你可以自由使用除了 overflow: hidden 之外的樣式聲明。
BFC布局引發(fā)的問題
我們看看BFC布局引發(fā)的問題吧。
例如如下代碼
新聞熱點
疑難解答
