认识浮动
? float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- float 属性最初只用于在一段文本内
浮动图像, 实现文字环绕的效果 - 但是早期的CSS标准中并没有提供好的
左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
? 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
? 可以通过float属性让元素产生浮动效果，float的常用取值
-
none：不浮动，默认值 -
left：向左浮动 -
right：向右浮动
浮动规则
规则一
? 元素一旦浮动后, 脱离标准流
-
朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 -
定位元素会层叠在浮动元素上面
18cb53e9231.png
规则二
? 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
18cb53efae0.png
规则三
- 浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
-
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
18cb53fc65e.png
规则四
? 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容
18cb5404f33.png
规则五
-
行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
18cb54251c8.png
