CSS 清除浮動(dòng)下的方法

在CSS中，清除浮動(dòng)是一個(gè)非常常見的需求，當(dāng)元素浮動(dòng)后，其他元素將無(wú)法正確顯示，因此我們需要一些方法來(lái)清除浮動(dòng)。

1、使用clear屬性：

CSS的clear屬性用于指定元素兩側(cè)都不能有浮動(dòng)元素，你可以將clear屬性設(shè)置為both、left或right，以清除指定方向的浮動(dòng)。

.clear-left {
    clear: left;
}
.clear-right {
    clear: right;
}
.clear-both {
    clear: both;
}

2、使用偽元素：

另一種方法是使用偽元素來(lái)清除浮動(dòng)，你可以為元素添加一個(gè)偽元素，并設(shè)置其clear屬性為both，以清除兩側(cè)的浮動(dòng)。

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

這種方法會(huì)在元素后添加一個(gè)空的表格，從而清除浮動(dòng)。

3、使用overflow屬性：

你還可以將元素的overflow屬性設(shè)置為auto或hidden，以清除浮動(dòng)，這種方法的效果與偽元素類似，但實(shí)現(xiàn)方式不同。

.clearfix {
    overflow: auto;
}

這種方法會(huì)在元素后添加一個(gè)隱藏的表格，從而清除浮動(dòng)。

是三種常見的清除浮動(dòng)的方法，你可以根據(jù)自己的需求選擇適合的方法。