浮动

浮动

应用场景

1. 文字环绕
2. 横向排列（兼容性好）
   （行块盒有空白折叠）

浮动的基本特点

修改float属性值为

• left：元素靠上靠左排列
• right：元素靠上靠右排列
• none：默认值

1. 当一个元素浮动后，一定是块盒（display: block）
2. 浮动元素的包含块和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度为auto时（常规流吸收），浮动适应内容宽度
2. 高度为auto时，与常规流一致，使用内容的高度
3. margin为auto，为0
4. 百分比设置与常规流一致

盒子排列

1. 左浮动靠上靠左排列

2. 右浮动靠右靠上排列

3. 浮动盒子在包含块中排列时，会避开常规流的块盒

4. 常规流块盒在排列时无视浮动盒子

5. 行盒在排列时会避开浮动盒子

如果文字没有在行盒中，浏览器会直接生成一个行盒包裹文字，该行盒成为匿名行盒
（文字环绕图片）

6. 外边距合并不会发生

高度坍塌

根源：常规流盒子的自动高度，在计算时不会考虑浮动盒子，浮动盒子脱离了常规流
解决方法：清除浮动
clear

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

.warpper::after{
    content: "";
    display: block;
    clear: both;
}