12.浮动

浮动

视觉格式化模型

1. 常规流
2. 浮动
3. 定位

应用场景

1. 文字环绕
2. 横线排列

浮动的基本特点

修改float属性值为：

• left
• right

默认值为none

1. 当一个元素浮动后，元素必定为块盒（更改displey属性为black）
2. 浮动元素包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 左浮动的盒子考上靠左排列
2. 右浮动的盒子考上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时，会避开浮动盒子
6. 边距合并不会发生

高度坍塌

高度坍塌的根源常规流盒子的自动高度。在计算时，不会考虑浮动盒子

清楚浮动，设计css属性：clear

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清楚左右浮动，该元素必须出现在前面所有浮动盒子的下方