如何正確地使用clearfix來消除浮動

浮動是CSS中一個重要的布局屬性，可實現元素的左、右對齊，使文本或圖片環繞在其他元素周圍，增加頁面的美觀性。然而浮動還有可能帶來意想不到的問題，例如元素脫離文檔流導致其他元素位置異常等，這時就需要使用清除浮動（clearfix）來解決這個問題。

一、什麼是clearfix?

clearfix是一種CSS技巧，可以解決使用浮動屬性後，由於高度坍塌造成的容器不能自適應問題。簡單來說，就是通過在使用浮動屬性的元素外包裹一個帶有clear屬性的偽元素，來使得容器恢復自己高度。clearfix的實現主要有以下兩種方法：

第一種方法是使用 :after 偽元素清除浮動，代碼如下：

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
}
.clearfix{
    zoom:1;  /*IE低版本瀏覽器觸發「hasLayout」，修復ie6、ie7浮動問題*/
}

這種方法使用了CSS3的:before和:after偽元素來清除浮動，其中content屬性用於在.:before和:after偽元素中生成內容。display: block屬性使生成的元素以塊級元素顯示，height:0 高度設為0，clear:both則是取消浮動。同時，為了解決IE低版本瀏覽器的bug，在外層容器設置zoom:1 觸發「hasLayout」，修復ie6、ie7浮動問題。

第二種方法是使用overflow屬性清除浮動，代碼如下：

.clearfix{
    overflow:hidden;
    zoom:1;  /*IE低版本瀏覽器觸發「hasLayout」，修復ie6、ie7浮動問題*/
}

這種方法通過首先給容器添加overflow:hidden或其他非visible的屬性，使得浮動元素不會超出自身的容器，然後再觸發其中包含浮動元素的父容器的BFC，產生了一種類似於清除浮動的效果。缺點是會產生內容截斷現象，因此需要注意。

二、clearfix 的實際應用

clearfix經常被用於解決浮動元素引起的高度塌陷問題，它可以在多種布局場景下被使用，例如固定寬度的浮動元素，自適應寬度的浮動元素等等，下面我們分別介紹這些場景下clearfix如何使用。

1. 固定寬度的浮動元素

在設置寬度的情況下，使用clearfix非常方便，只需要將包含所有浮動元素的容器添加clearfix class即可,示例代碼如下：

 左側內容
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/294052.html