先說說FC，FC的含義就是Fomatting Context。它是CSS2.1規(guī)范中的一個概念。

它是頁面中的一塊渲染區(qū)域。而且有一套渲染規(guī)則，它決定了其子元素將怎樣定位。以及和其它元素的關(guān)系和相互作用。BFC和IFC都是常見的FC。

分別叫做Block Fomatting Context 和Inline Formatting Context。

BFC

BFC（Block Formatting Context）叫做“塊級格式化上下文”。BFC的布局規(guī)則例如以下： 1.內(nèi)部的盒子會在垂直方向，一個個地放置； 2.盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的上下margin會發(fā)生重疊； 3.每一個元素的左邊，與包括的盒子的左邊相接觸，即使存在浮動也是如此； 4.BFC的區(qū)域不會與float重疊； 5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此； 6.計算BFC的高度時，浮動元素也參與計算。

介紹過了BFC的布局規(guī)范，再來說說哪些元素會產(chǎn)生BFC。 1.根元素。 2.float的屬性不為none； 3.position為absolute或fixed； 4.display為inline-block。table-cell，table-caption。flex； 5.overflow不為visible
接下來說說BFC的作用和原理 首先看看自適應(yīng)兩欄布局 我們先定義兩個div：
<div class="aside"></div> <div class="main"></div>

然后定義css：
div {width:300px; } .aside {width: 100px;height: 150px;float: left;background: black; } .main {height:200px;background-color:red; }
效果圖例如以下：

這正滿足了規(guī)范的第三條： 每一個元素的左邊，與包括的盒子的左邊相接觸。即使存在浮動也是如此。

所以假設(shè)我們須要將黑色區(qū)域撐到紅色的左邊。就須要利用規(guī)范的第四條： BFC的區(qū)域不會與float重疊。
也就是說我們須要創(chuàng)造BFC區(qū)域。我們通過將紅色區(qū)域的overflow設(shè)為hidden來觸發(fā)BFC：
.main {overflow:hidden;height:200px;background-color:red; }
效果例如以下：

完整代碼鏈接： http://codepen.io/brizer/pen/yNxEbK


接下來看看清除內(nèi)部浮動 首先是父div套子div
<div class="parent"><div class="child"></div> </div>
然后是css： .child {border:1px solid red;width:100px;height:100px;float:left; } .parent {border:1px solid black;width:300px; }
效果例如以下：
能夠看到，父div壓根就沒有被撐開。 我們再回想一下BFC規(guī)范中的第六條： 計算BFC的高度時，浮動元素也參與計算。

所以我們須要將父div觸發(fā)為BFC，也就是將其overflow設(shè)為hidden： .parent {border:1px solid black;width:300px;overflow:hidden; }
效果例如以下：
能夠看到父div已經(jīng)撐開了。

再談?wù)?strong>margin重疊問題。 先定義兩個垂直的div： <div class="p"></div> <div class="p"></div>
然后定義margin: .p {width:200px;height:50px;margin:50px 0;background-color:red; }
能夠看到margin重疊后的效果：


我們再看看BFC規(guī)范的第二條： 盒子垂直方向的距離由margin決定，屬于用一個BFC的兩個相鄰Box的上下margin會發(fā)生重疊。

說明兩者屬于同一個BFC，所以我們須要兩個div不屬于同一個BFC。

為第二個div套一個父親div。然后講其overflow設(shè)為hidden來激活一個BFC就能夠使margin不再重疊。 <div class="p"></div> <div class="wrap"><div class="p"></div> </div>
.wrap {overflow:hidden; }
效果例如以下：

總結(jié)

以上是生活随笔為你收集整理的浅谈BFC和IFC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。