为什么出现浮动？

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

什么时候清除浮动？

如果想要实现三个块级元素并排显示，期望效果如下图所示：

给三个块级元素都加上float属性后，页面效果如下图所示：

问题出现了，父元素高度塌陷了

一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

补充说明：

div是块级元素，即竖向排列，形成文档流。display: block;

对比span是内联元素，即横向排列。display: inline;

div加了float样式，就脱离了文档流。相当于一群人排队，float的就离开这个队伍，后面的向前。所以会有div重叠。

 

清除浮动的方式？

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的两大基本方法：

• 方法1：脚底插入clear:both;
• 方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

方法1的具体实现：

1. 在父元素的最后加一个冗余元素并为其设置clear:both

原理如下：
当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
实现：

<div class="box">

     <div class="div"></div>

     <div class="clear"></div>

</div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}

.div{ width:200px;height:200px;background:red;float:left;}

.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

效果图如下：

此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。