CSS中的BFC(塊級格式化上下文)是指頁面中不同區(qū)域形成了不同的上下文,這些上下文之間互不影響。換句話說,在一個BFC中,元素的布局不會受到外部元素的影響,也不會影響到外部元素的布局。
一個元素可以形成BFC的條件有很多,例如元素的根元素、浮動元素、定位元素、塊容器、表格元素等等。其中最常見的是塊容器,例如常用的div標簽和ul標簽。
在BFC中,元素會按照一定的規(guī)則進行布局。例如,在一個BFC中,兩個相鄰的元素會按照自身的寬度進行排列,不會發(fā)生重疊的情況。又比如,在一個BFC中,元素的高度會被自動撐開,使得下方元素不會重疊。
//創(chuàng)建BFC的方法 .one { overflow: auto; //這是最常用的方法,可以使用hidden或scroll代替 } .two { float: left; //浮動元素也可以創(chuàng)建BFC } .three { position: absolute; //絕對定位元素也可以創(chuàng)建BFC }
總的來說,BFC可以幫助我們更好地進行網(wǎng)頁布局。我們可以通過一些手段來創(chuàng)建BFC,從而避免元素的重疊和布局錯亂等問題。需要注意的是,在一些特殊情況下,BFC也可能會對我們的布局造成不必要的干擾,因此需要靈活運用。
上一篇css3圖像邊框效果
下一篇css3怎么加樣式