css学习 关于float浮动

float的本意:让文字像流水一样环绕浮动元素。
浮动并不是用来进行布局的元素，而是用来让文字环绕图片。

浮动破坏了正常的line boxes(让内容排成一行显示)，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度

使用float时会出现高度塌陷的情况。即父div的高度塌缩，若没有内容支撑，本身又没有给高度情况下，就会变为0。这也是因为浮动本身的高度被破坏造成的。

布局中出现一个浮动，其他元素基本上都会受到影响。

清除浮动的目的也就是为了解决高度塌陷的问题。

关于清除浮动：
https://segmentfault.com/p/1210000011625576/read

布局时，能不用浮动就不用浮动，它会带来许多问题，而且它也不是为了布局而产生的，可以使用父相子绝或table进行布局。

参考：https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/