清除浮動的常用三種方式
一时甚、clear:both /left? /right? /none? /inherit
分別代表在元素左右兩側(cè)不允許出現(xiàn)浮動元素/左側(cè)不允許出現(xiàn)浮動元素/右側(cè)不允許出現(xiàn)浮動元素/不清除浮動/繼承父元素的值
這只是清除了浮動對于兄弟元素的影響
二哈踱、overflow:hidden / auto
在浮動元素的父元素上設(shè)置了 overflow 的值為 hidden 或 auto ,可以閉合浮動刀诬。
清除浮動對父元素的影響
三邪财、:after 偽元素
這個辦法不但完美兼容主流瀏覽器,并且也很方便糠馆,使用重用的類怎憋,可以減輕代碼編寫,另外網(wǎng)頁的結(jié)構(gòu)也會更加清晰。
具體參考:kayosite.com/remove-floating-style-in-detail.html?
BFC
一. BFC 是什么耽装?
簡單來說期揪,BFC 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用
具有 BFC 的元素可以看作是隔離了的獨(dú)立容器凤薛,容器里面的元素不會在布局上影響到外面的元素缤苫,并且 BFC具有普通容器沒有的一些特性,例如可以包含浮動元素活玲,上文中的第二類清除浮動的方法(如 overflow 方法)就是觸發(fā)了浮動元素的父元素的 BFC,使到它可以包含浮動元素镀钓,從而防止出現(xiàn)高度塌陷的問題镀迂。
二.如何觸發(fā) BFC
上面介紹了 BFC 的定義,那么如何觸發(fā) BFC 呢探遵?
滿足下面任一條件的元素,會觸發(fā)為 BFC :
浮動元素涯穷,float 除 none 以外的值
絕對定位元素规哪,position(absolute,fixed)
display 為以下其中之一的值 inline-blocks蝠嘉,table-cells杯巨,table-captions
overflow 除了 visible 以外的值(hidden,auto服爷,scroll)
三. BFC 的特性
從整體上看获诈,BFC 是隔離了的容器心褐,這個具體可以表現(xiàn)為三個特性:
1. BFC 會阻止外邊距折疊(margin collapse)
2. BFC 可以包含浮動的元素
3. BFC 可以阻止元素被浮動元素覆蓋