CSSBFC(BlockFormattingContext)_html/css

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

BFC到底是什么？

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

怎樣才能形成BFC

BFC的作用

1.不和浮動元素重疊

如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個覆蓋的現(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)部浮動

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

3.嵌套元素Margin邊距折疊問題的解決

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

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

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