清除浮动的重要性及解决办法

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为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>