CSS浮动
1. 认识浮动
- float属性可以指定一个元素沿着左侧或者是右侧放置，允许文本和内联元素环绕它
- float属性最初只使用文字环绕图片
- 但却是早起CSS最好用的左右布局方案
- 绝对定位、浮动都会让元素脱标，以达到灵活布局的目的
- 可以通过float属性让元素脱标，产生浮动
- none：默认，不浮动
- left:左浮动
- right：右浮动
2. 浮动的规则
- 元素一旦浮动后，脱离标准流
- 朝着向左或者向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
- 标准流元素 < 浮动元素 < 定位元素（z-index >= 0)
- 浮动元素的边界不能超过包含快的左右边界（包含块包含其中的margin、padding）
- 浮动元素互相不能层叠
- 如果一个元素浮动，会紧贴另外一个方向相同的浮动元素
- 如果水平方向的空间不够显示浮动元素，浮动元素向下移动，直到有足够的空间为止
- 浮动元素不能与行内级元素内容层叠，行内级内容会被浮动元素推出
- 文字环绕图片的效果
- 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
浮动练习：京东浮动布局，利用宽度的auto来解决兼容性问题
京东浮动布局，利用宽度的auto来解决兼容性问题
浮动练习2：京东多列布局
京东多列布局
浮动练习3：加边框的布局：
考拉布局
