在谈清除浮动之前，我们首先有几个疑问：
<small>什么是浮动？</small>
<small>浮动有啥用？</small>
<small>我们为什么要清除它？</small>
首先，看看浮动的定义：
浮动（float）是CSS的一种属性，它可以使一个元素脱离正常的文档流(normal flow，又称常规流)，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。
浮动的属性包含如下几种：
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* Global values */
float: inherit;
float: initial;
float: unset;
为了更形象地介绍浮动的效果，我们来举一个简单的例子：
<div id="container" class="blue">
<div class="red"></div>
<div class="green"></div>
</div>
<style>
.blue{
padding:5px;
border: 1px solid blue
}
.red{
width:300px;
height:50px;
background-color:rgb(255,0,0);
display:inline-block;
}
.green{
width:50px;
height:200px;
background-color:rgb(0,255,0);
float:left}
</style>
上面这段代码实现的效果如下：
float对行内元素的影响
红色的长方形(下面简称为.red)为一个内联元素，绿色（.green）的则是一个浮动元素，当设置.green的float的属性为left的时候，可以看到.green浮到了.red的左边，而无视文档流的排布顺序（在文档中，红色的元素在前，绿色的再后），这就是float属性可以让元素脱离文档流的表现。
把上例中的.red变成display:block后，代码显示效果如下：
float对块级元素的影响
明显看出，.red独占一行，.green另起一行，float属性不会对块级元素的排布造成影响。
上例中，我们除了看到float属性对周围元素的影响外，还应该看到一个现象，那就是在.red和.green外，定义了一个蓝色的容器（.blue）。.blue原本应该同时包裹着.red和.green，但很明显.green元素的下边界超出了.blue，这种现象被称为高度塌陷，给我们的日常的排版造成了很不好的影响。那么，如何避免出现高度塌陷，让.blue可以同时包裹.red和.green呢？于是来到了今天的主题：
<big>清除浮动 </big><p>
本文接下来将要介绍几种常见的清除浮动的方法：
1.插入一个空元素
在container的底部，新增一个空元素，添加clear属性：
<div id="container" class="blue">
...
<div style="clear:both"></div>
</div>
实现的效果如下：
注：以下介绍的几种方法实现的效果与本图差不多，不再放效果图
清除浮动
这是一种传统的清除浮动的办法，优点是实现起来简单快捷，缺点则是空元素的出现会对文档的结构和风格的分离及其语义化的表现产生影响。
该方法还有一些变体，比如说将空元素换成br元素，即：
<div id="container" class="blue">
...
<br style="clear:both">
...
<div>
同样可以达到清除浮动的效果。
2.利用伪元素
我们知道每个元素前（::before）后(::after)都有一个伪元素，那么可以利用元素的这种特性，给所有需要清除浮动的元素添加一个类（.clearfix），如下：
<div id="container" class="blue clearfix">
...
<div>
<script>
...
.clearfix::after{
content:" ";
display:block;
clear:both; }
</script>
即可以为所有class为clearfix的元素清除浮动。这种方式相对来说不需要新增元素，整体代码量少，同时对文档结构与语义化的影响较小，是现在使用较为普遍的一种清除浮动的方法。
3.Overflow
我们还可以通过给父元素添加overflow属性来使父元素扩展到float元素的高度，达到清除浮动的效果，代码如下
<div id="container" style="overflow:hidden|auto">
...
<div>
使用overflow代码量极少，且基本不会产生语义化问题，但存在一些副作用。如果父元素所包含的子元素内容超出了父元素的范围，则子元素的超出部分会被裁剪（overflow:hidden）或会出现滚动条（overflow:auto），对于页面的表现效果大打折扣。
上述介绍的三种方法，均可实现清除浮动，且各有其优缺点，在日常工作中我们可以视需求有选择的使用。或者，期待W3C添加新的CSS属性来帮助实现清除浮动，如下例中，定义一个名为min-height的属性：
#container {
min-height: contain-floats;
}
意思是为父容器设置一个最小高度，可以完全包裹所有浮动的元素。
目前，可以实现类似功能的属性尚在开发中，可以期待在不久的将来会有更多高效快捷的清除浮动的方法为我们所用。
生命不息，学习不止！
网友评论