CSS清除浮动方法大全

一、浮动产生的原因
子元素使用了 CSS 的 float 属性后，脱离了文档流，导致其父元素高度无法被撑开，从而引起父元素的某些 CSS 属性无法正常显示，同时导致后续元素的显示位置出现错位。

示例代码：

页面效果：

我们可以看到：

①父元素 out-box 没有被撑开；②父元素 out-box 后面的 p 元素也收到了影响。

二、解决方法
方法1：为父元素设置高度
.out-box { height: 300px; }

示例代码：

页面效果：

分析：父元素高度撑开了，后面的 p 标签也显示正常了。这种解决方法适合于子元素高度固定的情况。

方法2：在父元素内底部增加空的 div 标签，并为其设置 clear：both
示例代码：

页面效果：

分析：父元素高度撑开了，后面的 p 标签也显示正常了。这种情况增加了额外的div标签，破坏了原来的文档结构。

方法3：在父元素外部底部增加空的 div 标签，并为其设置 clear：both
示例代码：

页面效果：

分析：父元素高度没有被撑开，后面的 p 标签显示正常了。这种情况增加了额外的div标签，破坏了原来的文档结构，同时父元素没有被撑开，如果此时为父元素设置了背景，那么仍然是没有效果的。

方法4：为父元素添加伪类 :after
示例代码：

页面效果：

分析：父元素高度撑开了，后面的 p 标签也显示正常了。这种情况下我们没有直接给 out-box 添加伪类 :after ，是因为在项目中可能需要用到清除浮动的地方很多，我们为其定义一个类 clearfix ，在每次需要的时候调用它就可以了。在这里为 clearfix 添加了一个 zoom : 1 的属性，是为了兼容IE浏览器。这种方式是我们推荐的方法。

方法5：为父元素添加伪类 :before 和 :after
示例代码：

页面效果：

分析：这样方法与方法4基本一致，不过是新增了一个 :before的伪类。

方法6：为父元素增加float属性
示例代码：

页面效果：

分析：父元素高度撑开了，但后面的 p 标签却仍然无法正常显示。此时需要再在父元素尾部添加清除浮动，页面才能显示正常。

方法7：为父元素添加定位
示例代码：

页面效果：

分析：父元素高度撑开了，但后面的 p 标签却仍然无法正常显示。此时需要给标签 p 添加适当的 padding-top 值。

好啦，到此大家应该对清除浮动的方法有了清晰的认识了。记住：我们推荐第四种方法！

学习是一条令人时而喜极而泣，时而郁郁寡欢的道路。如果您觉得这篇文章对您有所帮助，请您酌情赞赏！您的鼓励与支持，是我继续前行的莫大动力！