你不知道的浮动原理

浮动元素的产出

flaot属性用于定位和格式化内容，列如让图像向左浮动到容器中的文本那里。最简单的使用方法时float属性可以实现（报纸上）文字包围图片的效果。

浮动元素副作用

浮动元素因为浮动导致脱离文档流产生塌陷问题，在实际操作中你会发现，无论是父元素还是同级块元素，尽管文本形成了环绕，但是块级元素都会忽略float元素本身的布局方式，导致在同一行布局。

塌陷问题解决的原理

方法1

浮动元素塌陷，是因为浮动元素和父元素在同一行显示，因此我们可以利用清楚同一行样式来改变父元素的塌陷问题，clear:both解决的核心问题就是换行问题。一般情况下我们需要在父元素的后面加上一个块级伪元素然后在加上这个属性，因为行级元素不存在换行问题因此也不会有塌陷问题。

方法2

另一种清除方法就是我们用的最多的overfloat：hidden，这种方式是用了BFC原理，BFC 浮动元素参与父元素宽高的计算，这样就不会导致父元素宽高不够然后父元素塌陷问题，同理：利用产生BFC的其他元素也是可以解决浮动的。
如有错误欢迎指出，参考w3school和简书中的文章《深入理解float元素》