1. 概念

• 浮动(英语:float)
• 是指元素设置float属性时的状态,特征

通过浮动可以使一个元素向其父元素的左侧或者右侧移动。

2. 设置浮动

可以使用float属性来设置元素的浮动

格式:

float: [可选值] ;

实例:

float: left ;

可选值有:

• none: 默认值,元素不浮动
• left: 元素向左浮动
• right: 元素向右浮动

3. 理解浮动

把设置了浮动的元素想象成浮在水中的漂浮物(落叶)

注意事项:

• 元素设置浮动后,水平布局就不需要满足 「约束等式」
• 元素设置浮动后,会完全从文档流中脱离,不再占用文档流的位置。所以如果设置浮动的元素下有一个在文档流中的元素B(没有设置浮动),则这个元素B会自动向上移动。

4. 案例演示