浮动详解
注意点
- 设置浮动了之后,元素的
display属性就会变成block,但是不会占据整行而是包裹内容类似于inline-block
层叠关系
- 标准元素:标准流中的元素不存在层叠
- 浮动元素:float:left/right
- 定位元素:定位元素会层叠到标准流元素的上面
- 标准元素==>浮动元素==>定位元素
浮动规则一
- 脱离标准流;
- 朝着向左或向右移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止;(浮动元素不会覆盖定位元素,只会挤掉定位元素的位置)
浮动规则二
- 浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
- 比如行内级元素/inline-block元素/块级元素的文字内容(图文混排)
浮动规则三
- 行内级元素/inline-block元素浮动后,其顶部将于所在行的顶部对齐(只会在当前行浮动)
浮动规则四
- 浮动之间不能重叠
- 如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动的元素(左浮找左浮/右浮找右浮)
- 如果水平方向的剩余空间 不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止
浮动规则五
- 浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
