CSS浮动

目录

应用场景

浮动的基本特点

盒子尺寸

盒子排列

高度坍塌

---

视觉格式化模型，大体上将页面的盒子排列分为三种：常规流，浮动，定位

应用场景

1.文字环绕

2.横向排列

浮动的基本特点

修改float的值为

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

1. 当一个元素浮动后，元素必定为块盒
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度为auto时，表示适应内容宽度不要求撑满
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto时，为0
4. 边框，内边距，百分比设置与常规流一样

盒子排列

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

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行叫做匿名行盒

高度坍塌

原因是因为常规流盒子的自动高度只考虑常规盒子，不会考虑浮动盒子。

解决方法：清楚浮动 

• left：清除左浮动，该元素必须在前面所有左浮动的盒子的下方

• right：清除右浮动，该元素必须在前面所有左、右浮动的盒子的下方

• both：清除所有浮动，是将之前的常规流盒子撑开了

1.在浮动盒子的最后一行加入一个类样式
.clearfix{
    clear:both;
}

2.加入伪元素选择器
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}