<div> 清除 float 是在 CSS 中常見的技術(shù)，用于處理浮動(dòng)元素對(duì)其他元素布局造成的影響。在浮動(dòng)元素的父元素中添加一個(gè) div 元素，并給該元素設(shè)置 clear 屬性，能夠使得父元素包含浮動(dòng)元素，從而避免布局混亂的問題出現(xiàn)。
浮動(dòng)元素在一定程度上脫離了文檔流，這可能會(huì)導(dǎo)致浮動(dòng)元素的父元素?zé)o法正確地將其包含在內(nèi)。解決這個(gè)問題的方法之一是使用 clear 屬性清除浮動(dòng)，使父元素重新獲取正確的高度。下面通過幾個(gè)代碼案例詳細(xì)解釋和展示 div 清除 float 的應(yīng)用。

案例一：

<div style="overflow: hidden;">
<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: green;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: blue;"></div>
</div>

在這個(gè)案例中，三個(gè)子塊元素都設(shè)置了 float 屬性，并且父元素 div 設(shè)置了 overflow: hidden。這樣一來，子元素就會(huì)被父元素包含在內(nèi)，不再影響其后的文檔流布局。

案例二：

<div class="clearfix">
<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: green;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: blue;"></div>
</div>
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>

在這個(gè)案例中，父元素 div 設(shè)置了一個(gè)額外的 clearfix 類。然后使用 CSS 偽元素 ::after 來在該元素最后添加一個(gè)空元素，并給該元素設(shè)置 display: table 和 clear:both。這樣一來，父元素就會(huì)自動(dòng)包含其內(nèi)部的浮動(dòng)元素，從而避免布局問題。

通過以上兩個(gè)案例，我們可以看出清除 float 對(duì)浮動(dòng)元素的父元素進(jìn)行包含有著重要的作用。無論是使用 overflow 屬性還是 clearfix 類，都能有效地解決浮動(dòng)元素帶來的布局問題。在實(shí)際開發(fā)中，根據(jù)具體情況選擇適合的清除浮動(dòng)方式，能夠幫助我們更好地控制頁面布局，保證頁面的穩(wěn)定性和可靠性。