<div>清浮動是指通過一些技巧，使得父容器能夠正確地包裹住浮動的子元素，而不發(fā)生高度塌陷的現(xiàn)象。在開發(fā)過程中，我們經(jīng)常會使用浮動的內(nèi)容來實現(xiàn)多列布局，但是浮動元素會對父容器造成影響，導(dǎo)致父容器高度失效。為了解決這個問題，我們可以使用<div>清浮動的方法來處理，保證父容器的高度正常。
下面我們將通過幾個案例來詳細(xì)解釋如何使用<div>清浮動。我們來看一個簡單的案例：

案例一：

HTML代碼如下：

<div class="container">
<div class="left">左側(cè)內(nèi)容</div>
<div class="right">右側(cè)內(nèi)容</div>
</div>

CSS代碼如下：

.container {
overflow: hidden;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}

在這個案例中，我們創(chuàng)建了一個父容器<div class="container">，其中包含兩個浮動的子元素<div class="left">和<div class="right">。為了讓父容器正確包裹住浮動元素，我們在CSS樣式中給父容器設(shè)置了overflow: hidden屬性。

這樣，父容器的高度將會被浮動元素?fù)伍_，從而避免了高度塌陷的問題。

接下來我們再看一個稍微復(fù)雜一些的案例：

案例二：

HTML代碼如下：

<div class="container">
<div class="left">左側(cè)內(nèi)容</div>
<div class="right">右側(cè)內(nèi)容</div>
<div class="clearfix"></div>
</div>

CSS代碼如下：

.container {
position: relative;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.clearfix {
clear: both;
}

在這個案例中，我們在父容器<div class="container">最后添加了一個空的<div class="clearfix">元素，并通過使用CSS樣式清除浮動。通過給空元素設(shè)置clear: both屬性，可以清除浮動后父容器可以正常包裹浮動的子元素。

來說，<div>清浮動是解決浮動元素對父容器高度失效問題的一種方法。通過給父容器設(shè)置overflow: hidden屬性或添加一個空的元素并清除浮動，可以保證父容器正確包裹住浮動的子元素，避免高度塌陷的現(xiàn)象。

希望本文對您有所幫助，謝謝閱讀！