overflow:hidden为何能清除浮动？

 设置float之后，比如在一个容器里，一个图片后面有一段文字，图片设置了float。会有3个变化：

1、被float的元素会脱离标准文档流。(如果float的是inline element，会变成float-box)。shift to the left or right,到包含他的盒子边缘或者其他float元素边缘。

2、段落会上移。

3、段落内容会shorten来适应float的宽度（这个宽度是包括图片的margin的，如果float宽度很大，导致没有空间容纳一个单词，就下移）。 

 

清除浮动一般有2种方法：clear: both; overflow: hidden。

通过clear: both来清除浮动，会有一个问题：就是如果这个容器没有设置高度，子块只有float元素，容器高度会坍陷。这个时候可以设置overflow: hidden来解决。

 

可是为什么overflow能解决这个问题呢？

overflow这个属性本来是隐藏超出父块之外的子块。在隐藏的时候，需要计算全部高度，这个时候会把float元素的高度算上。顺带达成了清理浮动的效果。