由于父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標準流盒子。

一、為什么要清除浮動

• 父元素高度塌陷：?如果父元素內部的所有子元素都浮動了，并且沒有設置明確的高度，父元素可能會因為子元素脫離文檔流而坍塌為零高度，導致父元素的背景、邊框等樣式無法顯示。
• 后續元素布局錯亂：?浮動元素會影響后續元素的布局，可能導致后續元素環繞浮動元素，或者出現垂直重疊等問題。

二、清除浮動的方法

1.額外標簽法

額外標簽法也稱為隔墻法，是W3C推薦的做法。

• 原理：?clear?屬性指定一個元素是否允許其周圍的浮動元素。 它有四個值：left，right，both?和?none。 設置了?clear?屬性的元素會強制移動到指定的浮動元素下方。

• 用法：?在浮動元素后面的元素上添加?clear?屬性。（在浮動元素末尾添加一個空的標簽）

• 優點：?簡單易懂，兼容性好。

• 缺點：?需要添加額外的 HTML 元素，可能影響語義化。

<div class="container"><div class="float-left">左浮動</div><div class="float-right">右浮動</div><div class="clear"></div>  <!-- 添加一個空的清除元素 -->
</div><style>.container {border: 1px solid black;overflow: hidden; /* 或者使用其他方法解決父元素高度塌陷，詳見下文 */}.float-left {float: left;width: 100px;height: 50px;background-color: lightblue;}.float-right {float: right;width: 100px;height: 50px;background-color: lightgreen;}.clear {clear: both; /* 清除左右浮動 */}
</style>

2.父級添加overflow

可以給父級添加 overflow 屬性，將其屬性值設置為 hidden , auto 或 scroll 。

• 原理：?overflow?屬性定義了當一個元素的內容溢出其容器時發生的事情。 當?overflow?屬性的值不是?visible?時（例如，hidden，auto，scroll），它會創建一個新的塊級格式化上下文，其可以包含浮動元素，從而解決父元素高度塌陷的問題。

• 用法：?將?overflow?屬性添加到浮動元素的父元素上。

• 優點：?不需要添加額外的 HTML 元素，簡潔方便。

• 缺點：?可能導致內容被裁剪或出現滾動條 (如果使用?auto?或?scroll)，具體取決于內容是否超出容器。 如果父元素有定位，overflow: hidden?可能會影響?z-index。

<div class="container"><div class="float-left">左浮動</div><div class="float-right">右浮動</div>
</div><style>.container {border: 1px solid black;overflow: hidden; /* 或者 auto, scroll */}.float-left {float: left;width: 100px;height: 50px;background-color: lightblue;}.float-right {float: right;width: 100px;height: 50px;background-color: lightgreen;}
</style>

3. :after 偽元素法

:after 是額外標簽法的升級版，也是父級元素添加。

• 原理：?在父元素的末尾添加一個偽元素，并使用?clear: both?清除浮動。 這種方法不需要添加額外的 HTML 元素，而且代碼簡短易懂。

• 用法：?在浮動元素的父元素上使用?:after?偽元素，并添加?clear: both?屬性。

• 優點：?不需要添加額外的 HTML 元素，代碼簡潔，兼容性好，推薦使用。

• 缺點：?需要理解偽元素的概念。

<div class="container"><div class="float-left">左浮動</div><div class="float-right">右浮動</div>
</div><style>.container {border: 1px solid black;}.container::after {content: "";display: block; /* 或者 table */clear: both;}.float-left {float: left;width: 100px;height: 50px;background-color: lightblue;}.float-right {float: right;width: 100px;height: 50px;background-color: lightgreen;}
</style>

4.雙偽元素清除浮動(給父元素添加）

• 優點：代碼更簡潔
• 缺點：照顧低版本瀏覽器

三、總結

為什么要清除浮動？

• 父級沒高度。
• 子盒子浮動了。
• 影響下面布局了，就應該清除浮動。