css要如何清除浮动？浮动会导致高度塌陷的问题，本节将讲解如何清除浮动带来的影响。
1、高度塌陷
虽然浮动属性解决了页面布局中的很多问题，但浮动布局也不是全然没有缺陷的。例如，当元素浮动时，会脱离文档流；当父级包含框的高度小于浮动框的高度时，会发生高度塌陷。
【例1】创建一个div元素，设置3px的橙色边框，在div元素中创建一个img元素作为子元素，浏览器显示效果如图2所示，div元素被子元素img撑开，div的高度等于img的高度。CSS代码如下。
.box{
border: 3px solid #f8a978;
}
img{
height: 300px;
}
HTML代码如下。
<body>
<div class="box">
<img src="img/cats.jpg" alt=""/>
</div>
</body>
图2 在div元素中创建一个img元素
为img添加浮动属性之后，情况发生了变化。img元素浮动之后脱离了文档流，无法撑起父级的高度，父级div的高度变为0，页面发生高度塌陷，如图3所示。CSS代码如下。
img{
height:300px;
float: left;
}
图3 高度塌陷
2、清除浮动的方法
1. 给浮动元素的父级设置高度
给例1中浮动元素的父级设置高度，运行结果如图3所示。CSS代码如下。
.box{
border: 3px solid #f8a978;
height: 300px;
}
img{
height:300px;
float: left;
}
图3 给浮动元素的父级设置高度
给浮动元素的父级设置高度的缺点是：
（1）不方便，不知道子元素高度时无法操作；
（2）可扩展性差，在父元素中添加其他内容时，父元素需要的高度也会变化。
2. 给浮动元素的父级添加CSS样式float: left
给浮动元素的父级添加CSS样式float: left，为父级开启BFC，以解决高度塌陷的问题，运行结果如图4所示。CSS代码如下。
.box{
border: 3px solid #f8a978;
height: 300px;
}
img{
height:300px;
float: left;
}
图4 给浮动元素的父级添加CSS样式float: left
给浮动元素的父级添加CSS样式float: left清除浮动，这种方式看似撑开了父级的高度，但并不能解决问题，如图5所示，父级的父级同样面临高度塌陷的问题。此外，这两个元素浮动之后会脱离文档流，其他元素会顶替它们的位置，造成页面的混乱。因此，不推荐使用这种方式清除浮动。
图5 body元素高度未撑开
BFC是每个属性的隐藏样式。BFC是一个独立的布局环境，其中的元素布局不受外界影响。开启BFC的元素有以下特点：
（1）开启了BFC的元素与其父元素的垂直外边距不会发生重叠；
（2）开启了BFC的元素会包含其浮动的子元素；
（3）开启了BFC的元素不会被浮动元素所覆盖。
要使一个HTML元素触发BFC，满足下列任意一个条件即可：
（1）float的值不是none；
（2）position的值不是static或relative；
（3）display的值是inline-block、table-cell、flex、table-caption或inline-flex；
（4）overflow的值不是visible。
3. 给浮动元素的父级元素添加CSS样式overflow: hidden
给浮动元素的父级元素添加CSS样式overflow: hidden，为父级开启BFC，运行结果如图6所示。代码如下。
.box{
border: 3px solid #f8a978;
float: left;
}
图6 给浮动元素的父级元素添加CSS样式overflow: hidden
overflow属性规定，当内容溢出元素框时隐藏溢出的内容。给浮动元素的父级元素添加CSS样式overflow: hidden有时会影响元素的样式。
在使用这种方式解决高度塌陷的问题之前需要考虑实际需要。
3、使用伪类清除浮动在浮动
元素后（父级元素中）添加一个带有clear:both属性的没有内容的块元素（可以是div、br等元素）即可清除浮动。提示添加的元素必须是块元素，因为clear:both只作用于块元素。
方案一：在浮动元素下面创建一个div元素，设置clear:both，如图7所示，可以解决父级元素高度塌陷的问题，之后把新增div中的内容删掉即可，不影响页面的内容，但这种方法不符合W3C标准中结构、样式、行为三者分离的要求。CSS代码如下。
.box{
border: 3px solid #f8a978;
overflow: hidden;
}
img{
height: 300px;
float: left;
}
图7 添加块元素
HTML代码如下。
<div class="box">
<img src="img/cats.jpg" alt=""/>
<div class="block">
添加的元素
</div>
</div>
方案二：伪类清除浮动——万能清除法。为了解决方案一不符合W3C标准的缺陷，引入伪元素的概念。CSS伪元素用于向某些选择器设置特殊效果，CSS伪元素有4类，如表1所示。
表1 CSS伪元素
【例2】创建一个class名为box的div元素，内部包含一个div元素，内容为“Hi，”，使用伪元素在后面加上文本“CSS”。CSS代码如下。
body{
color: #606266;
font-size: 30px;
}
.box:after{
content: "CSS";
}
HTML代码如下。
<div class="box">
<div>
Hi，
</div>
</div>
在浏览器中打开开发者模式，可以看到在box内部的最后位置，添加了内容为“CSS”的伪元素，如图8所示。
图8 使用:after添加内容
利用伪元素:after解决高度塌陷的问题。CSS代码如下。
.box{
border: 3px solid #f8a978;
}
img{
height:300px;
float: left;
}
.box:after{
content: "在浮动元素后面创建一个伪元素 ";
display: block;
clear: both;
}
HTML代码如下。
<div class="box clearfix">
<img src="img/cats.jpg" alt=""/>
</div>
这种方法只是将方案一中的空标签改为用:after创建的伪元素，同样是使用clear: both清除浮动。用:after在浮动元素后面创建一个伪元素，content属性中规定这个伪元素的内容，设置display:block，将伪元素设为块元素，设置clear: both，清除伪元素的左右浮动，运行结果如图9所示。
图9 清除伪元素的左右浮动
将内容改为空，即content: ""，运行结果如图10所示。
图10 内容设为空字符串
这种方法遵循了W3C标准中结构、样式、行为三者分离的要求，是目前最常用的清除浮动以解决高度塌陷的方法。一个页面上往往有多个需要清除浮动的元素，所以通常将这种方法命名为clearfix，之后在使用中给需要清除浮动的元素添加clearfix类名即可。CSS代码如下。
.clearfix:after{
clear: both;
display: block;
content: "";
}
