清除浮動的CSS屬性

浮動是CSS布局中常用的一種方式，可以讓元素在頁面中浮動自由排列，常見的應用包括圖文混排和導航欄。然而，浮動元素可能會對周圍的元素造成影響，導致布局錯亂，此時我們需要清除浮動。本文將從多個方面詳細闡述清除浮動的CSS屬性。

一、清除浮動的CSS屬性是什麼

清除浮動的CSS屬性是clear。它用於規定元素的哪個側面不允許有浮動元素。

二、清除浮動的CSS寫法正確的是

清除浮動的方式有很多種寫法，如下是最常見的兩種寫法：

.clearfix::after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility:hidden; 
}
.clearfix {
    *zoom:1;
}

在父元素上添加clearfix類，同時清除浮動：

.clearfix:after{
    clear: both;
    content: '';
    display: block;
}
.clearfix{
    *zoom: 1;
}

三、CSS如何清除浮動

1. overflow清除浮動

使用overflow屬性，將容器元素的值設置為hidden、auto或者scroll，因為浮動元素會導致容器元素高度塌陷，而這些屬性可以使容器元素自適應內部元素高度，從而清除浮動，如下例：

.container{
    overflow: hidden;
    /* or overflow: auto; */
    /* or overflow: scroll; */
}

2. clear清除浮動

clear屬性用於清除浮動元素對周圍元素的影響，取值有left、right、both、none等。如下例：

.clearfix::after{ 
    content:""; 
    display:block; 
    clear:both;
}

3. 雙偽元素清除浮動

使用偽元素:after和:before，可以使用和清除浮動的寬高為0、inline-block的元素佔位，防止元素塌陷。如下例：

.clearfix::after, .clearfix::before {
    content:"";
    display: block;
    height:0;
    overflow:hidden;
    clear:both;
}
.clearfix {
    zoom:1;
}

四、CSS清除所有浮動

清除所有浮動元素可以使用下面的代碼：

.clear{
    clear:both;
    display:block;
    height:0;
    font-size: 0;
    content:"";
}

這裡設置了字體大小為0，是為了使該元素不佔用任何垂直空間。

五、CSS清除浮動的其他方法

1. 不使用浮動

最好的方法是不使用浮動，而是使用Flexbox布局、Grid布局等現代化的CSS布局方式。

2. 使用fit-content()函數

fit-content()函數可以使元素自適應內部元素高度或寬度，替代 overflow 屬性，如下例：

.container{
    height: fit-content;
}

3. 使用display:table屬性

在容器元素上使用display:table屬性，內容元素使用display:table-cell屬性可以使元素自適應內部元素高度，而不需要清除浮動。如下例：

.container{
    display: table;
}
.container .item{
    display: table-cell;
}

結語

以上是清除浮動的CSS屬性和方法的詳細闡述，我們可以通過多種方式達到清除浮動的目的，選擇適合自己的方法可以避免布局帶來的各種問題。