在 Block Formatting Context 中，每一個(gè)元素左外邊與包含塊的左邊相接觸（對(duì)于從右到左的格式化，右外邊接觸右邊）， 即使存在浮動(dòng)也是如此（盡管一個(gè)元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮），除非這個(gè)元素也創(chuàng)建了一個(gè)新的 Block Formatting Context 。

BFC到底是什么？

當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。這里有點(diǎn)類(lèi)似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思。

怎樣才能形成BFC

BFC的作用

1.不和浮動(dòng)元素重疊

如果一個(gè)浮動(dòng)元素后面跟著一個(gè)非浮動(dòng)的元素，那么就會(huì)產(chǎn)生一個(gè)覆蓋的現(xiàn)象，很多自適應(yīng)的兩欄布局就是這么做的。比如下圖的效果，參考例子

1 1232 
3 The quick brown fox jumped over the lazy dog's back.4 The quick brown fox jumped over the lazy dog's back.5 The quick brown fox jumped over the lazy dog's back.6 The quick brown fox jumped over the lazy dog's back.7 

2.清除元素內(nèi)部浮動(dòng)

只要把父元素設(shè)為BFC就可以清理子元素的浮動(dòng)了，最常見(jiàn)的用法就是在父元素上設(shè)置overflow: hidden樣式，對(duì)于IE6加上zoom:1就可以了(IE Haslayout)。

3.嵌套元素Margin邊距折疊問(wèn)題的解決

按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊，這個(gè)包括相鄰元素，嵌套元素，只要他們之間沒(méi)有阻擋(例如邊框，非空內(nèi)容，padding等)就會(huì)發(fā)生margin重疊。

因此要解決margin重疊問(wèn)題，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來(lái)說(shuō)，意義不大，沒(méi)有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來(lái)說(shuō)就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊了。

聲明：本網(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