CSS浮动总结

1. 基本介绍

浮动属性可以让元素产生浮动效果，float的常用取值有：

none:不浮动，默认值

left:向左浮动

right：向右浮动

2. 浮动规则

2.1 浮动规则一

元素一旦浮动后：

1. 脱离标准流
2. 朝着左（右）方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
3. 定位元素会层叠在浮动元素上面

                                                   

2.2 浮动规则二

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

1. 可以实现图文环绕

2.3 浮动规则三

行内级元素、inline-block元素浮动后，其顶部将于所在行的顶部对齐

前面两个图片都是float:left,图片只会左右浮动而不会浮动到上面去。

2.4 浮动的规则四

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

2.5 浮动的规则五

浮动元素不会重叠：

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

如果水平方向空间不够，浮动元素向下移动，直到有充足的空间为止

（上面三个box都是左浮动，绿色的box由于空间不够向下移动）

2.6 浮动的规则六

浮动元素的 顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

2.7 清除浮动

浮动元素脱离了标准流，变成脱标元素，不再向父元素汇报高度

父元素计算总高度时，不会计算浮动子元素的高度，导致了高度坍塌的问题

通过清除浮动来解决父元素高度坍塌问题，即清除浮动是为了让父元素计算总高度的时候，把浮动子元素的高度算进去

2.7.1 清除浮动的方法

1. 不推荐的方法:

2. 推荐的方法