原因：

元素设置了float属性后，就会脱离文档流，当 包含框 的高度小于 浮动框 的时候，会出现高度塌陷。因此才需要清除浮动！

表现如图：包括框container已经包不住float的图片了！

清除浮动方法：

1：给 包含框 添加 after伪元素清除浮动。代码：

.clearfix:after{ display: block; content:''; clear: both; height:0;}

2：使用BFC， 原理：让浮动块包含在同一个BFC中。

给 包含框 加一个overflow：hidden就可以了；代码：

.container{ overflow: hidden;   
} .container div{ float: left;
}

3:  在 浮动元素 的最后面添加一个新元素，应用clear:both.

这种方法不太好，使margin实效了，并且增加了一个无用的element。

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=jcckaa&title=为何要清除浮动？如何清除？