盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中多个盒子的排列规则
三种方式：
1.常规流
2.浮动
3.定位
常规流布局
常规流 也可以叫做 文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大情况下，一个盒子的包含块，就是其父元素的内容盒（子元素跟着父元素移动）
块盒
1.每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto，意思是将剩余空间吸收掉（如父元素内容盒宽度100px 子元素border宽度1px padding宽度10px width设为auto，则子元素内容盒宽度为78px）
居中方案：子元素设定宽度，margin设置为auto
2.每个块盒垂直方向上的auto值
height：auto，适应内容的高度
margin：auto，表示0
3.百分比取值
padding、宽、margin可以取值百分比
以上是相对于包含块的宽度。
高度的百分比：
①父元素未设置高度，子元素设置百分比无效
②父元素设置高度，子元素按照父元素高度*百分比计算（如果内容过多，则会溢出）
4.外边距合并（height）
两个块盒相邻，外边距会重叠。（两个外边距取最大值）
父子元素，若父元素没有border和padding，父子元素的margin也会合并（只要是相邻就会合并）
浮动
1.文字环绕
2.横向排列
浮动的基本特点：
修改float属性值为：
left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右
默认值为none
1.被设置浮动的元素，会变成块盒（display属性变成block）
2.浮动元素的包含块，为父元素的内容块。
3.宽度、高度为auto时，适应内容宽度
4.margin为auto时，为0
5.浮动盒子在排列时会避开常规流块盒，而常规流块盒无视浮动盒子
6.行盒在排列时会避开浮动元素（如果文字没有在行盒中，浏览器会自动生成一个包裹文字的行盒，叫做匿名行盒）
高度坍塌
原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
解决办法：清除浮动
css属性：clear
默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除所有浮动，该元素必须出现在前面所有浮动盒子的下方