浮动一直是我们编写网页最常用的方法，但是也是最不听话的，一不小心会乱跑，虽然有万能的float闭合div多写一个可以解决掉，但是为了清除浮动而多出来一个空的div实在看着不爽，这里我在网上找到了两种解决的办法，相信很多朋友已经在用了，不过还是列出来，以备后用。[html
在CSS布局中，浮动元素（`float`属性设置为`left`或`right`）经常被用来实现元素的并排显示，例如创建多列布局。然而，浮动元素的一个副作用是它们可能会导致其父元素的塌陷，即父元素无法正确包裹住浮动的子元素，从而影响到后续元素的布局。为了解决这个问题，我们通常需要“清除浮动”。本文将介绍两种常见的清除浮动的方法：使用`clear:both`和使用伪元素。
1. **使用`clear:both`**
在HTML中，我们可以创建一个空的`div`元素，并为其添加`clear:both`样式。这种方法简单直接，但可能会增加额外的HTML标记，影响代码的整洁性。例如：
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<div class="clear"></div>
</ul>
```
在CSS中，定义`clear:both`：
```css
.clear {
clear: both;
}
```
2. **使用CSS伪元素**
CSS3引入了伪元素，如`:before`和`:after`，它们允许我们在元素内部添加内容而无需在HTML中增加额外的元素。对于清除浮动，我们可以利用`:after`伪元素，结合`clear:both`和`display:block`来实现。
```css
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
```
在HTML中，只需在需要清除浮动的父元素上添加`clearfix`类，如：
```html
<ul class="clearfix">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
```
对于IE6和IE7，由于它们不支持`:after`伪元素，我们可以使用`zoom:1`触发hasLayout，同时设置`overflow:hidden`或`_height`来避免高度塌陷问题。然而，这已经不是现代浏览器优化的标准做法，因为`overflow:hidden`会隐藏溢出的内容，而`_height`是专为IE6/7的私有属性。
更现代的解决方案是使用`display:flex`或`display:grid`布局，它们可以自动处理子元素的浮动，无需额外的清除浮动操作。但在老版本浏览器中可能不兼容，因此在实际项目中需要根据目标浏览器范围来选择合适的清除浮动方法。
总结来说，清除浮动是为了保持良好的页面布局，防止浮动元素影响到其周围的元素。`clear:both`和CSS伪元素是两种经典的清除浮动方法，而现代布局技术如Flexbox和Grid提供了更强大且简洁的解决方案。选择哪种方法取决于项目需求、浏览器兼容性和代码简洁性。
