清除浮動

淺笑如傷發表於2020-10-13

一、為什麼要清除浮動？

清除浮動：使父元素圍住浮動的子元素，避免對後續元素造成影響。

二、方式

1、給父元素設定overflow:hidden;或float:left;或position:absolute;觸發塊級格式化上下文 (BFC)

2、利用clear樣式

在浮動元素之後加入新元素，設定clear樣式

.clear-div{
    clear:both;
}

這種方式的不完美之處在於增加了一個專門用於清除浮動的元素

推薦使用偽元素，如下

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix{zoom:1;}   //相容IE6、7

 

相關文章