CSS中清除浮動是常見的技巧，在網頁布局中經常用到。如果不處理浮動，可能會導致出現奇怪的布局問題。那么，清除浮動前后對比是什么樣的呢？

代碼示例：
/* 清除浮動前 */
.container {
background-color: #eee;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #ccc;
}
/* 清除浮動后 */
.container {
background-color: #eee;
overflow: hidden;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #ccc;
}
.clearfix::after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}

上述代碼演示了清除浮動前后的效果。在清除浮動前，容器的背景色只占了浮動元素的高度，導致背景色不能完全擴展到容器底部。而在清除浮動后，容器的overflow屬性被設置為hidden，可以包含浮動元素，并且給浮動元素的父元素添加clearfix類，能夠在子元素底部添加一個空隙元素，使父容器能夠被正確地撐開。

清除浮動是前端開發中的基本操作，能夠避免網頁出現布局問題，提高網頁的可讀性和可維護性。在設計布局時，一定要注意浮動元素的影響，并使用適當的清除浮動方法。