清除float对文档流影响的两种方式分析

float对文档流的影响

在float元素之后的元素会被填充到没有被float元素占用的normal flow中。如果float元素没有占满整行并且接下来的元素可以被填充在float元素周围，则它会被填充到float元素周围。这时，如果我们希望在float元素之后的元素不受float元素的影响，依然像普通块状元素一样，新起一行。我们就需要对float进行清除。

使用clear清除float的影响

clear可以应用在float元素之后的元素中对float的影响进行清除。

在使用clear:both后，该元素将处在所属的block formatting context中所有float元素的下面。如果我们只是想取消该元素上面或者相邻的元素的float的影响，使用clear无法满足我们的需求。

使用overflow清除float的影响

可以在float元素的父元素中设置overflow:hidden|auto|scroll。 这时只要把想另起一行的element放在float元素的父元素的下方即可。

为什么overflow也可以取消float?

其实overflow并不是清除了float，而是新建了BFC。BFC类似于编程语言中的作用域，作用域变了，float也就影响不到了。只有clear可以取消float的影响。

如果一个box中只有float元素，那么它是没有高度的。这时该box会塌陷成一条线。这是因为box在计算高度时，会先从normal flow中抽离float元素。该box无法得到height。这时设置该box的overflow属性（除visible皆可）可以让该box扩张成float元素的height。

当一个box的overflow属性不是visible时，它会新创建一个block formatting context。在这个box之后的element不在这个BFC里，所以不受float的影响，即从视觉上消除了float的影响。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/float#Specifications
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formattin...
http://www.w3.org/TR/CSS21/visuren.html
https://css-tricks.com/all-about-floats/