CSS2.1中清除浮動是很重要的一個概念,尤其是在布局設計中。當父元素內部有浮動元素時,如果沒有正確的清除浮動,就會導致父元素高度塌陷,影響整個布局的效果。下面將介紹CSS2.1中常用的三種清除浮動的方法。
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
第一種方法是使用clearfix,它是一種偽類選擇器,在父元素上添加clearfix類名,可以在CSS中定義clearfix樣式,并使用偽類:after清除浮動。注意,在IE6中需要額外的hack來解決該問題。
.clearfix:after { content: ""; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }
第二種方法是使用zoom屬性。該屬性只有IE瀏覽器支持,將父元素設置zoom:1,可以清除內部浮動。此方法也可以用于解決IE6中的問題。
.parent { overflow: hidden; }
第三種方法是使用overflow:hidden屬性。給父元素添加overflow:hidden樣式可以阻止元素從父元素溢出,并清除內部浮動。缺點是,如果子元素超出父元素的大小,會被裁剪掉。
上一篇css2兼容樣式