1.BFC是什么

BFC決定了元素對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用郁稍。當(dāng)涉及到可視化布局的時候，BFC提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進(jìn)行布局选泻。一個環(huán)境中的元素不會影響到其他環(huán)境中的布局。比如浮動元素會形成BFC美莫，浮動元素內(nèi)部子元素的主要受該浮動元素影響页眯，兩個浮動元素之間是互不影響的。

2.表現(xiàn)規(guī)則

1厢呵、在創(chuàng)建了 Block Formatting Context 的元素中窝撵，其子元素按文檔流一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部襟铭，兩個相鄰的元素之間的垂直距離取決于 ‘margin’ 特性碌奉。
根據(jù) CSS 2.1 8.3.1 Collapsing margins 第一條短曾，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發(fā)生折疊現(xiàn)象。也就是處于同一個BFC中的兩個垂直窗口的margin會重疊道批。
根據(jù) CSS 2.1 8.3.1 Collapsing margins 第三條错英，生成 block formatting context 的元素不會和在流中的子元素發(fā)生空白邊折疊。所以解決這種問題的辦法是要為兩個容器添加具有BFC的包裹容器隆豹。
2椭岩、在 Block Formatting Context 中，每一個元素左外邊與包含塊的左邊相接觸（對于從右到左的格式化璃赡，右外邊接觸右邊）判哥， 即使存在浮動也是如此（盡管一個元素的內(nèi)容區(qū)域會由于浮動而壓縮），除非這個元素也創(chuàng)建了一個新的 Block Formatting Context 碉考。
3塌计、Block Formatting Context就是頁面上的一個隔離的獨立容器，容器里面的子元素不會在布局上影響到外面的元素侯谁，反之也是如此锌仅。
4、根據(jù) CSS 2.1 9.5 Floats 中的描述墙贱，創(chuàng)建了 Block Formatting Context 的元素不能與浮動元素重疊热芹。
表格的 border-box、塊級的替換元素惨撇、或是在普通流中創(chuàng)建了新的 block formatting context（如元素的 'overflow' 特性不為 'visible' 時）的元素不可以與位于相同的 block formatting context 中的浮動元素相重疊伊脓。
5 、當(dāng)容器有足夠的剩余空間容納 BFC 的寬度時魁衙，所有瀏覽器都會將 BFC 放置在浮動元素所在行的剩余空間內(nèi)报腔。
6、 在 IE6 IE7 IE8 Chrome Opera 中剖淀，當(dāng) BFC 的寬度介于 "容器剩余寬度" 與 "容器寬度" 之間時纯蛾，BFC 會顯示在浮動元素的下一行；在 Safari 中纵隔，BFC 則仍然保持顯示在浮動元素所在行茅撞，并且 BFC 溢出容器；在 Firefox 中巨朦，當(dāng)容器本身也創(chuàng)建了 BFC 或者容器的 'padding-top'、'border-top-width' 這些特性不都為 0 時表現(xiàn)與 IE8(S)剑令、Chrome 類似糊啡，否則表現(xiàn)與 Safari 類似。
經(jīng)驗證吁津，最新版本的瀏覽中只有firefox會在同一行顯示棚蓄，其它瀏覽器均換行堕扶。
7、 在 IE6 IE7 IE8 Opera 中梭依，當(dāng) BFC 的寬度大于 "容器寬度" 時稍算，BFC 會顯示在浮動元素的下一行；在 Chrome Safari 中役拴，BFC 則仍然保持顯示在浮動元素所在行糊探，并且 BFC 溢出容器；在 Firefox 中河闰，當(dāng)容器本身也創(chuàng)建了 BFC 或者容器的 'padding- top'科平、'border-top-width' 這些特性不都為 0 時表現(xiàn)與 IE8(S) 類似，否則表現(xiàn)與 Chrome 類似姜性。
經(jīng)驗證瞪慧，最新版本的瀏覽中只有firefox會在同一行顯示，其它瀏覽器均換行部念。
8弃酌、根據(jù)CSS2.1 規(guī)范第10.6.7部分的高度計算規(guī)則，在計算生成了 block formatting context 的元素的高度時儡炼，其浮動子元素應(yīng)該參與計算妓湘。

3.如何產(chǎn)生BFC

當(dāng)一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生BFC：

• float的值部位none
• overflow的值不為visible
• display的值table-cell,table-caption,inline-block中的任何一個
• position的值不為relative和static

4.BFC的用途

1射赛、不和浮動元素重疊
2多柑、清除元素內(nèi)部浮動
3、解決上下相鄰兩個元素重疊

5.什么是IE的haslayout

Layout是IE瀏覽器渲染引擎的一個內(nèi)部組成部分楣责。在IE瀏覽器中竣灌，一個元素要么自己對自身內(nèi)容進(jìn)行組織和計算大小，要么依賴于包含塊來計算尺寸和組織內(nèi)容秆麸。為了協(xié)調(diào)者兩種方式的矛盾初嘹，渲染引起采用了'hasLayout'屬性，屬性值可以為true或者false沮趣。當(dāng)一個元素的'hasLayout'屬性值為true時屯烦，我們說這個元素有了新布局。如Object.currentStyle.hasLayout
特別注意的是房铭，hasLayout 在 IE 8 及之后的 IE 版本中已經(jīng)被拋棄驻龟，所以在實際開發(fā)中只需針對 IE 8 以下的瀏覽器為某些元素觸發(fā) hasLayout。

6 如何觸發(fā)haslayout

display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值缸匪，僅用于塊級元素)overflow-x: (除 visible 外任意值翁狐，僅用于塊級元素)overflow-y: (除 visible 外任意值，僅用于塊級元素)position: fixed