前言
什么是CSS清除浮动？
在非IE浏览器下，当容器的高度为auto（没有设置），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
添加浮动之前：
添加浮动：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
我们可以看到，由于没有给父元素.box设置高度。在给子元素添加了浮动之后，父元素变成了一条直线，下方的标准流盒子会往上，被浮动元素压住。
一、四种常用的清除浮动方法
1.额外标签法（隔墙法）
在最后一个浮动标签后，新加一个标签，给其设置clear：both；（不推荐）
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}/* 额外标签法清除浮动 */.clear {clear: both;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span><!-- 额外标签法 --><div class="clear"></div></div><div class="normal">我是标准流盒子</div></body></html>
结果图：
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
2.父级添加overflow: hidden
给浮动元素的父级添加overlow: hidden；（不推荐）
优点：书写简单
缺点：溢出隐藏
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 给父级元素添加overflow清除浮动 */overflow: hidden;width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图：
通过触发BFC方式，实现清除浮动。
3.父级添加after伪元素
（推荐使用）
优点：结构语义化正确
缺点：由于IE6-7不支持:after，兼容性问题
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* ::after伪元素清除浮动 */.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}/* IE6，7专有，照顾兼容性 */.clearfix {*zoom: 1;}.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box clearfix"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图：
4.父级添加双伪元素
（推荐使用）
优点：结构语义化正确
缺点：由于IE6-7不支持:after，兼容性问题
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 双伪元素清除浮动 */.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}/* IE6-7专有，照顾兼容性 */.clearfix {*zoom: 1;}.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box clearfix"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图：
总结
这篇文章介绍了四种常用的清除浮动的方法，推荐使用的为after伪元素清除浮动与双伪元素清除浮动。
以上代码均可直接复制粘贴运行。
![[css] 清除浮动的方式有哪些及优缺点？](https://700zi.400zi.cn/uploadfile/img/14/889/a4279d971d423961e0541a14dc627ce6.jpg)
