CSS中清除浮動是一項非常重要的技巧,當使用浮動布局時,需要清除浮動,以避免布局出現問題。以下是常用的清除浮動的方法:
1. 使用空的塊級元素清除浮動:
.clearfix{ clear:both; height:0; overflow:hidden; }
這是最常用于清除浮動的方法,通過在浮動元素的父元素上添加一個空的塊級元素并設置clear屬性,從而將父元素的高度撐開,以達到清除浮動的效果。
2. 使用偽元素清除浮動:
.clearfix::after{ content:""; display:block; clear:both; height:0; visibility:hidden; } .clearfix{ zoom:1; /*兼容IE6/7*/ }
這種方法使用了CSS3中的偽元素,在浮動元素的父元素上添加一個偽元素并設置clear屬性,從而達到清除浮動的效果。需要注意的是,為了兼容IE6/7瀏覽器,需要在父元素上設置zoom屬性。
3. 使用overflow屬性清除浮動:
.clearfix{ overflow:auto; }
通過在浮動元素的父元素上設置一個overflow屬性,從而導致父元素形成BFC(塊級格式化上下文),以達到清除浮動的效果。
無論哪種方法,清除浮動都是非常必要的,可以避免布局上的問題。同時,使用中需要根據具體情況選擇最適合的方法。
上一篇mysql快捷方式在哪里
下一篇css清楚左右浮動