常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则，大体分为三种：

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

常规流布局

所有元素，默认情况下，都属于常规流布局，总体规则：块盒独占一行，行盒水平排列

块盒居中
margin：0 auto;

外边距的合并
两个相邻盒子的外边距相邻的话会被合并，取最大值；

浮动流布局

应用场景

文字环绕
横向排列

浮动的基本特点

修改fioat属性值：
-left :左浮动，元素靠上左
-right:右浮动，元素靠上右
-默认值为none

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

盒子排列

• 浮动盒子在包含块中排列时，会避开常规流盒子；
• 常规流盒子在包含块中排列时，会无视浮动流盒子

如果文字没有在行盒元素中，浏览器会自动将文字放进行盒元素中（匿名行盒），也就是说，行盒都可以看成内容；

高度塌陷

案例：


原因：常规流盒子在不设置高度的情况下，其高度由内容决定，而常规流盒子不会考虑浮动流盒子，也不受其影响，所以当常规流盒子包含了浮动流盒子后，再不给常规流盒子设置高度的情况下，浮动流盒子不会将常规流盒子撑开

发生高度塌陷的解决方案

clear
1.默认值为：none;
2.left:清除左浮动，该元素必须出现在所有浮动盒子的下方；
3.right:清除右浮动，该元素必须出现在所有浮动盒子的下方；
4.both:清除左右浮动，该元素必须出现在所有浮动盒子的下方；

解决成功后随浮动盒撑开

第一种解决方案（不推荐）

第二种解决方案（推荐）