CSS基础（11）- 浮动

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

浮动

视觉格式化模型，大体将页面中盒子的排列方式分为3种方式：

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

应用场景

1. 文字环绕

2. 横向排列

浮动的基本特点

修改float属性值为

• left：左浮动，元素靠上靠左
• right：右浮动，元素靠上靠右

默认值为none

1. 当一个元素浮动时，它一定会变成块盒（display属性变为block）
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度为auto时，适应内容宽度（常规流会吸收剩余空间，要撑满父元素的内容盒）
2. 高度为auto时，适应内容高度（与常规流一致）
3. margin为auto时，则为0（四个方向都是）(常规流如下)

 1. 每个块盒的总宽度，必须刚好**等于**包含块的宽度
- 宽度默认为auto(把剩余的空间吸收掉)
- margin也可以设为auto(也是把剩余的空间吸收掉)，默认为0
- width吸收能力强于margin
- 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被**margin-right**吸收

4. 边框、内边距、百分比设置与常规流一样（除高度以外，其余的百分比都与父元素的内容盒的宽度相关，高度的百分比要看情况）

- 高度的百分比：
1）. 包含块的高度取决于子元素的高度时，子元素里设置的百分比无效
2）. 包含块的元素不取决与子元素的高度时，百分比相对于父元素的高度

盒子排列

• 左浮动的盒子，靠上靠左排列
• 右浮动的盒子，靠上靠右排列
• 浮动盒子在包含块中，会避开常规流块盒
• 常规流块盒在排列时，无视浮动盒子
• 行盒在排列时，会避开浮动盒子
• 外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成行盒包裹文字，该行盒叫做匿名行盒
想要文字和图片有一定间距，是对img设置margin噢

高度坍塌

高度坍塌的原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，涉及css属性：clear

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

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码