共計 1230 個字符，預計需要花費 4 分鐘才能閱讀完成。

浮動是 CSS 中常見的一種布局方式，通過浮動可以實現多列布局、文字環繞圖片等效果。但是在使用浮動時，我們也會發現一個問題，那就是浮動元素會導致父元素高度塌陷，使得父元素無法正常占據空間，從而影響整個頁面的布局。為了解決這個問題，我們就需要清除浮動。

清除浮動的方法

常見的清除浮動的方法有以下幾種：

1. 父級元素設置高度

通過為父級元素設置一個具體的高度，可以強制讓父元素占據空間。但是這種方法的缺點是無法適應內容變化，如果內容高度超過了設定的高度，就會出現溢出的情況。

2. 父級元素設置 overflow 屬性

通過為父級元素設置 overflow 屬性為 hidden、auto 或 scroll，可以讓浮動元素被父元素包裹，并且父元素可以正常占據空間。但是這種方法的缺點是如果出現內容超出父元素的情況，就會被裁剪掉。

3. 在浮動元素后添加一個空的塊級元素

通過在浮動元素后添加一個空的塊級元素，并且為其設置 clear 屬性為 both，可以讓浮動元素被父元素包裹，并且父元素可以正常占據空間。但是這種方法的缺點是會增加頁面中無意義的元素，不夠優雅。

4. 使用偽元素清除浮動

通過在父元素上使用::after 偽元素，并且為其設置 clear 屬性為 both，可以清除浮動。這種方法優雅簡潔，且不會增加無意義的元素，是目前比較流行的一種清除浮動的方法。

清除浮動后為什么還是不占位置

雖然清除浮動可以解決父元素高度塌陷的問題，但是有時候我們會發現清除浮動后，浮動元素仍然不占據位置，這是為什么呢？

這是由于浮動元素脫離了正常的文檔流，在布局時不再參與其他元素的定位和排布，因此在某些情況下，浮動元素的位置不會被計算在內。為了解決這個問題，我們可以通過以下幾種方法來讓浮動元素占據位置。

1. 在父元素中添加 clearfix 類

通過在父元素中添加 clearfix 類，并且在 CSS 中設置 clearfix 類的樣式，可以讓浮動元素占據位置，并且不影響其他元素的排布。clearfix 類的樣式如下：

.clearfix::after {

content: “”;

display: block;

clear: both;

}

2. 在浮動元素上添加 clear 屬性

通過在浮動元素上添加 clear 屬性，可以讓浮動元素占據位置。但是需要注意的是，如果浮動元素本身就是一個 clear 元素，那么這種方法就會失效。

3. 使用 flex 布局

通過使用 flex 布局，可以讓浮動元素占據位置，并且不影響其他元素的排布。flex 布局可以實現靈活的布局方式，可以解決很多傳統布局方式無法解決的問題。

清除浮動是 CSS 布局中常見的問題，通過使用合適的清除浮動方法，可以避免父元素高度塌陷的問題。但是在清除浮動后，浮動元素有時候會不占據位置，需要通過一些方法來解決。在實際開發中，我們需要根據具體情況選擇合適的清除浮動方法，以及解決浮動元素不占據位置的問題。

TAGS

清除浮動，CSS 布局，父元素，浮動元素，占據位置，clearfix，flex 布局

丸趣 TV 網 – 提供最優質的資源集合！