1. 基本介绍
浮动属性可以让元素产生浮动效果,float的常用取值有:
none:不浮动,默认值
left:向左浮动
right:向右浮动
2. 浮动规则
2.1 浮动规则一
元素一旦浮动后:
- 脱离标准流
- 朝着左(右)方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
2.2 浮动规则二
浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
- 可以实现图文环绕
2.3 浮动规则三
行内级元素、inline-block元素浮动后,其顶部将于所在行的顶部对齐
前面两个图片都是float:left,图片只会左右浮动而不会浮动到上面去。
2.4 浮动的规则四
如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界
2.5 浮动的规则五
浮动元素不会重叠:
如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
如果水平方向空间不够,浮动元素向下移动,直到有充足的空间为止
(上面三个box都是左浮动,绿色的box由于空间不够向下移动)
2.6 浮动的规则六
浮动元素的 顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
2.7 清除浮动
浮动元素脱离了标准流,变成脱标元素,不再向父元素汇报高度
父元素计算总高度时,不会计算浮动子元素的高度,导致了高度坍塌的问题
通过清除浮动来解决父元素高度坍塌问题,即清除浮动是为了让父元素计算总高度的时候,把浮动子元素的高度算进去
2.7.1 清除浮动的方法
1. 不推荐的方法:
2. 推荐的方法