css中的浮动问题
网页里布局用的最多的属性，float:left/right;
1.1 浮动元素脱离文档流
证明1：
证明2：在标准文档流中，给行内元素设置宽高是无效的，如果行内元素脱离文档流（设置浮动），就可以正常设置宽高了
-
- 浮动元素互相贴靠
如果有足够空间，那么3个盒子就会贴靠摆放：
如果没有足够空间3就会被挤下来，贴着1摆放
如果空间非常小仅仅够摆放一个盒子：
还有向右浮动的特性，是先解析先渲染
-
- 文字包围效果
-
- 元素浮动会导致父元素自动撑起高度收缩
如果给上图中div内部的元素p标签，设置了浮动，那么div的高度会产生收缩的效果：如下图。
1.5 浮动的清除
方法1：给浮动元素的父元素（祖先元素）加高度，就好像关住一个盒子的出口
方法2：当出现浮动元素之后，在浮动元素的后方设置清除浮动的属性：clear：both；
方法3： overflow:hidden;如果超出子元素高度超出范围，则不显示也没有滚动条 overflow:auto;;如果超出子元素高度超出范围，则不显示但是有滚动条