在網(wǎng)頁制作中，經(jīng)常會遇到需要清除浮動的場景。一般情況下，清除浮動的方式是在浮動元素的父元素中添加一個clearfix類，然后在樣式表中定義clearfix類。下面是一個常見的clearfix樣式：

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}

以上代碼使用了偽元素::before和::after，通過添加空內(nèi)容，并將顯示屬性設(shè)置為table，來讓它們位于內(nèi)容之前和之后。接著，通過clear屬性清除浮動，使得元素脫離浮動的影響。最后，為了在IE6/7瀏覽器中兼容，還需要為clearfix類設(shè)置zoom屬性。

然而，在清除浮動的同時，可能會破壞一些CSS效果。舉個例子，在一個有浮動元素的區(qū)塊里，添加一個帶有邊框和背景顏色的普通塊級元素，會發(fā)現(xiàn)這個塊級元素的高度無法撐開父元素，因為浮動元素沒有真正占據(jù)位置。

為了保留邊框和背景色的效果，可以在父元素中添加overflow:hidden;的樣式。這是因為，當(dāng)父容器設(shè)置了overflow:hidden;時，父容器就形成了BFC（塊級格式上下文），可以讓浮動元素正確的占據(jù)位置，從而撐開父容器。

.parent {
overflow: hidden;
}

還有一種情況是，在一個有浮動元素的區(qū)塊中，給塊級元素設(shè)置了margin-top。這時可能會發(fā)現(xiàn)，設(shè)置的margin-top并不會生效。這是因為浮動元素將margin-top擠下去了。為了解決這個問題，可以給塊級元素添加一個空的塊級元素，并清除空的塊級元素的浮動。

.parent::after {
content: "";
display: block;
height: 0;
clear: both;
}

以上代碼使用::after做一個空的塊級元素，在樣式中清除空元素的浮動，這樣就不會出現(xiàn)塊級元素的margin-top被浮動元素擠下去的情況了。