BFC是什么?是怎么設(shè)置的?
看視頻里面老師說到BFC,就是加了一句? zoom:1;就是BFC寫法嗎?
那
.clearfix{
?????? clear:both;
?????? zoom:1;
}
這就是BFC清除浮動(dòng)寫法嗎?
看視頻里面老師說到BFC,就是加了一句? zoom:1;就是BFC寫法嗎?
那
.clearfix{
?????? clear:both;
?????? zoom:1;
}
這就是BFC清除浮動(dòng)寫法嗎?
2017-01-23
舉報(bào)
2017-01-24
zoom:1能夠觸發(fā)haslayout特性,用于兼容IE6/7的清除浮動(dòng)。但絕大多數(shù)現(xiàn)代瀏覽器不兼容。
以下是老師課程中關(guān)于清除浮動(dòng)的總結(jié),希望對(duì)你有幫助:
清除浮動(dòng)的兩種基本方法:1、在高度塌陷的父元素底部插入具有clear:both聲明的元素,比如在html中插入一個(gè)多余的塊級(jí)元素div,或者插入不兼容IE6/7的CSS偽元素after。這種方法與外界有接觸,可能導(dǎo)致頂部margin重疊。2、觸發(fā)BFC/haslayout這兩種特性。與外界隔絕,沒有margin重疊問題。
BFC,Block formatting context是高級(jí)瀏覽器特有的概念,具有包裹性。不能應(yīng)用于所有場景。
haslayout是IE6/7私有的概念。
下面是部分能夠觸發(fā)這兩種特性的屬性:?float:left/right、position:absolute/fixed、overflow:hidden/scroll (IE7+)、display:inline-block/table-cell(IE8+)、width/height/zoom:1/… (IE6/IE7)。
權(quán)衡以上問題后的清除浮動(dòng)策略:
.clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; }--使用CSS偽元素after,插入一個(gè)內(nèi)容為空、高度為0的塊級(jí)元素來clear,并且用overflow的hidden觸發(fā)了BFC。
.clearfix { *zoom: 1; }--兼容IE6/7的寫法,觸發(fā)haslayout。