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元素的高度算上。顺带达成了清理浮动的效果。