清除浮动
为什么要清除浮动呢？
一般来说，在网页布局中，我们一般不会写死盒子的高度，如果我们将盒子高度固定了的话，那我们要是想再加内容的话就会超出盒子了，此时就打乱了网页布局，所以说，尽量不写盒子的高度，让盒子的内容来撑开盒子的高度。
但是如果不给盒子的高度（并且想要左右排列时，给其浮动后，元素浮动起来之后不占用文档流，此时会引起下列元素和父元素排列错误），此时涉及BFC准则，总的来说，由于父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准流盒子。
清除浮动的本质：就是清除浮动盒子所带来的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度之后，就不会影响下面的标准流了
方法如下：
策略：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）
方法一：额外标签发（w3c推荐做法）也称隔墙法
方法二：父级元素添加overflow属性
方法三：父级添加after伪元素
方法四：发髻添加双伪元素
方法一：额外标签法
（添加的标签必须是块级元素）
其实就是在最后一个浮动元素后面加上一个盒子（相当于一堵墙）这样该盒子下面的元素就不会在往上顶了，因为已经该盒子已经占用了该标准流的一行（和上面浮动布局的本质相对应看一下）。
eg.
<style>
.son1,.son2
{
.....
float:left;
}
.clrar{
clear:both;
}
<!--清除浮动之后 father2的元素就不会顶上来了，会按照标准流来进行排列-->
</style>
<body>
<div class="father">
<div> class="son1"</div>
<div> class="son2"</div>
<div> class="clear">
<!--类名随意取-->
</div>
</div>
<div class="father2"></div>
</body>优点：通俗易懂，书写方便
缺点：添加了许多无意义的标签，结构话较差。
方法二：父级添加overflow（以后再详解）
给父级元素添加overflow属性：hidden、auto或scroll
优点：代码简洁
缺点：无法显示溢出来的部分
方法三：：after伪元素
它是方法一的升级版，不过是给父级添加（其实就是在父级元素后面添加了一个盒子，再给其设置clear属性）
.clearfix:after
{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
*zoom:1 /*IE 6 7*/
}该方法照顾了低版本的浏览器，没有增加额外的标签，结构较简单，一般百度、淘宝等都使用的该方法
方法四：双伪元素清除浮动
也是给父盒子添加
在父元素前面和后面分别插入 方法三的升级，这样就完全闭合了
.clearfix:after，
clearfix:before
{
content:"";
display:table;
}
.clear:after
{
clear:both;
}
.clearfix
{
*zoom:1 /*IE 6 7*/
}
//后面将会详细解释table..小米、腾讯....使用的该方法。
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
