布局模型
布局规则，又叫视觉格式化模型。指页面中的多个盒子的排列规则。
大体上将页面中盒子的排列分为三种方式：常规流、浮动、定位。
1. 常规流布局
常规流，又可以叫文档流、普通文档流、常规文档流。
所有元素，默认情况下，都属于常规流布局。 总体规则：块盒独占一行，行盒水平依次排列。
包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大多数情况下，盒子的包含块，为其父元素的内容盒。
1.1 常规流中块盒规则
1. 每个块盒的总宽度，必须刚好等于包含块的总宽度（内容的宽度）
- 宽度默认值为
auto，表示将剩余空间吸收掉 margin取值默认为0，取值为auto时，表示将剩余空间吸收掉width吸收能力强于margin- 若宽度、边框、内边距、外边距计算后仍然有剩余空间，该剩余空间由
margin-right全部吸收。 - 当
margin设置为负数，width为auto时，块盒宽度会变大；因为始终要满足每个块盒的总宽度，必须刚好等于包含块的总宽度（内容的宽度）
2. 每个块盒垂直方向上的auto值
height: auto，适应内容的高度margin: auto，表示0
3.百分比取值，即padding，宽，margin可以取值为百分比
- 所有百分比均相对于包含块的宽度计算，包括垂直方向上的
margin和padding - 高度的百分比：
- 包含块的高度取决于子元素的高度时，设置百分比无效
- 包含块的高度不取决于子元素的高度，百分比相对于父元素的高度
4. 上下边距的合并
- 两个常规流块盒，上下外边距相邻，会进行合并，取其中一个最大值
- 父子元素之间的外边距合并，当父子元素的上下外边距相邻时，子元素的外边距会合并到父元素的外边距上
- 常规流中，块盒在其包含块中居中，可以定宽，然后左右
margin设置为auto。
2. 浮动布局
应用场景：
- 文字环绕
- 横向排列
float值：
left：左浮动，元素靠上靠左排列；right：右浮动，元素靠上靠右排列；- 默认值为：
none；
1. 浮动的基本特点
盒子尺寸
- 元素设置为浮动后，一定为块盒（
display: block;） - 浮动元素的包含块，和常规流一样，为父元素的内容盒
- 盒子宽度为
auto时，表示适应内容宽度（常规流中宽度会吸收包含块中剩余空间） - 盒子高度为
auto时，表示适应内容高度，与常规流一致 margin为auto时，值为0- 边框、内边距、百分比设置与常规流一致
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字
高度塌陷
原因：常规流盒子的自动高度适应内容，在计算时，不会考虑浮动盒子
解决：清除浮动，涉及css属性：clear
- 默认值：
none left：清除左浮动，该元素必须出现在所有左浮动盒子下方right：清除右浮动，该元素必须出现在所有右浮动盒子下方both：清除所有浮动，该元素必须出现在所有浮动盒子下方
3. 定位
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position。属性值如下：
- 默认值：
static，静态定位（不定位） relative：相对定位absolute：绝对定位fixed：固定定位
一个元素，只要不是position的取值不是static，认为改元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移。
可以通过4各CSS属性设置其位置。
- left
- top
- right
- bottom
相对定位下，盒子的偏移不会对其它盒子造成任何影响。
绝对定位
- 宽高为auto时，适应内容
- 包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则其包含块为整个网页
固定定位
- 宽高为auto时，适应内容
- 包含块固定为视口
定位下的居中
- 定宽（或高）
- 左右（或上下）设置为0
- 上下（或左右）margin设置为auto，用来吸收剩余空间的
多个定位元素重叠
设置z-index
补充
- 绝对定位、固定定位元素一定为块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
