CSS 語言可以設置清除浮動(clear float),以解決一些浮動元素容易出現高度塌陷的問題。當浮動元素超出父元素的邊界時,它的父元素可能無法正常地計算高度,導致布局出現混亂。
/* 清除浮動的幾種方法 */ .clear-fix { zoom: 1; } .clear-fix::after { display: block; content: ""; clear: both; } .clear-fix2::before, .clear-fix2::after { content: ""; display: table; } .clear-fix2::after { clear: both; }
清除浮動的方法有多種,可以通過設置 overflow、添加空 div 或使用偽類來實現。其中,clear-fix
類和clear-fix2
類使用了 zoom 和::after
偽類來清除浮動,這兩種方式應用較為廣泛。
代碼中,::after
偽類產生一個匿名塊級容器,然后再通過 clear 屬性將該容器放在浮動元素下方,以達到清除浮動的目的。zoom 屬性與 Microsoft 瀏覽器關鍵字有關,對于非 IE 瀏覽器,它沒什么用處。
在編寫 CSS 時,需要注意每個浮動元素的后面都要使用以上方法進行清除。有時在某些瀏覽器下,清除浮動的方法可能存在一些問題,此時可以通過添加額外的 div 或者進行其他的容器層級變化來解決問題。
上一篇iis php5配置
下一篇css中最難的部分