在前端開發中，我們經常會遇到浮動元素導致父元素高度塌陷的問題。這時，我們需要使用CSS清空浮動。

清空浮動指的是清除浮動元素對周圍元素的影響，使其不再影響頁面布局。清空浮動的方法主要有四種：

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

首先，我們可以使用:before和:after偽元素來清空浮動。這種方法需要給浮動元素的父元素添加clearfix類，并在CSS樣式中設置clearfix的:before和:after偽元素的內容為空，同時設置它們的display為table。在:after中，還需要再次設置clear:both。最后，為了讓IE6能夠支持該方法，我們還需要在CSS文件中加入*zoom:1;。

.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clear {
zoom: 1;
}

其次，我們可以使用另一種方式給浮動元素的父元素添加clear類，并在CSS樣式中設置.clear的:after偽元素。該方法需要將.clear的:after偽元素的visibility設置為hidden，同時將其display設置為block，height設置為0。content設置為空格，font-size設置為0，最后再次設置clear:both。這種方法同樣需要在CSS文件中加入zoom:1;，以支持IE6。

.father{
overflow:hidden;
}

第三種方法則是使用overflow:hidden。這種方法需要在浮動元素的父元素中設置overflow:hidden。這樣可以讓父元素可以接受所有子元素，并將溢出的內容隱藏，從而避免父元素被子元素撐開。

.father{
display:flow-root;
}

最后一種方法是使用display:flow-root。這種方法需要將浮動元素的父元素的display屬性設置為flow-root，在新的布局上下文中創建塊格式化上下文，從而清除浮動。該方法可以兼容部分較老的瀏覽器。

綜上，清空浮動是前端開發中的重要問題，掌握好這4種方法可以讓我們更加輕松地解決浮動問題，提高我們的工作效率。