css中的浮动问题

网页里布局用的最多的属性，float:left/right;

1.1 浮动元素脱离文档流

证明1：

证明2：在标准文档流中，给行内元素设置宽高是无效的，如果行内元素脱离文档流（设置浮动），就可以正常设置宽高了

 

1. 1. 浮动元素互相贴靠

如果有足够空间，那么3个盒子就会贴靠摆放：

 

 

 

如果没有足够空间3就会被挤下来，贴着1摆放

如果空间非常小仅仅够摆放一个盒子：

还有向右浮动的特性，是先解析先渲染

1. 1. 文字包围效果

 

1. 1. 元素浮动会导致父元素自动撑起高度收缩

如果给上图中div内部的元素p标签，设置了浮动，那么div的高度会产生收缩的效果：如下图。

1.5 浮动的清除

方法1：给浮动元素的父元素（祖先元素）加高度，就好像关住一个盒子的出口

方法2：当出现浮动元素之后，在浮动元素的后方设置清除浮动的属性：clear：both；

方法3： overflow:hidden;如果超出子元素高度超出范围，则不显示也没有滚动条   overflow:auto;;如果超出子元素高度超出范围，则不显示但是有滚动条