为什么要清除浮动？
因为浮动元素脱离标准流（不占位置 ），不会撑开父元素，会影响其他元素的布局。为了不影响其他元素的布局会给浮动元素的父元素一个指定的高度。
如下代码所示，如果给浮动元素的父元素设置高
<body>
<div class="father">father
<div class="son">son1</div>
<div class="son">son2</div>
<div class="son">son3</div>
</div>
<div class="brother">brother</div>
</body>.father{
height: 200px;
background-color: #ff7c2d;
}
.son{
float:left;
height: 200px;
width:150px;
background-color: #bfbfbf;
}
.brother{
height: 150px;
background-color: #00a4ff;
}则效果如下：
如果不给浮动元素的父元素设置高:
<body>
<div class="father">father
<div class="son">son1</div>
<div class="son">son2</div>
<div class="son">son3</div>
</div>
<div class="brother">brother</div>
</body>.father{
/*height:200px;*/
background-color: #ff7c2d;
}
.son{
float:left;
height: 200px;
width:150px;
background-color: #bfbfbf;
}
.brother{
height: 150px;
background-color: #00a4ff;
}则效果如下（下面的元素会跑到上面去，破坏布局）：
为了方便增删内容，不能给浮动元素的父盒子指定高度,需要让子盒子撑开父亲，这时候就需要清除浮动了。（也就是说只有在父元素没有给高度时才需要清除浮动）
清除浮动的本质是什么？
清除浮动的本质就是清除浮动元素造成的影响。
清除浮动的语法
选择器{clear:属性值;}| 属性值 | 描述 |
| left | 不允许左侧有浮动（清除左侧浮动的影响） |
| right | 不允许右侧有浮动（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
（实际开发中，基本上只用clear：both）
清除浮动的策略是闭合浮动。
简单来说就是只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
清除浮动的方式
1. 额外标签法（也叫隔墙法，是W3C推荐的做法）
在最后一个浮动的盒子后面加一个块级盒子（必须是块级元素），为这个块级盒子添加清除浮动的语法。
额外标签法的缺点是：添加许多无意义的标签，结构化较差。
额外标签法在实际工作中可能会遇到，但不常用。
2. 给浮动元素的父级元素添加overflow
overfolw:hidden;overflow的属性值还可以设置为auto或者是scroll，但最常用的是hidden。
这种方法的缺点是 无法显示溢出部分。
3. 给浮动元素的父级元素添加 :after伪类元素，是额外标签法的升级版。
代码如下：
.clearfix:after{
content:""; /*content是伪类元素里的必须属性*/
display:bolck; /*伪类元素是行内元素，需要转化为块级元素*/
height:0;
clear:both;
visibility:hidden;
}
/*照顾低版本浏览器*/
.clearfix{/*zoom是IE6 ,7专有的属性*/
*zoom:1;
}
缺点：需要照顾低版本浏览器。
代表网站：百度 淘宝网 网易
4.给浮动元素的父级元素添加双伪元素清除浮动
代码如下：
.clearfix:before,
.clearfix:after{
cnotent:"";
display:table;
}
.clearfix:after{
clerar:both;
}
.clearfix{
*zoom:1;
}缺点：需要照顾低版本浏览器
代表网站：小米，腾讯等
1348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
