常规流

视觉格式化模型（布局规则）：页面中的多个盒子排列规则
大致三种方式
1.常规流
2.浮动
3.定位

包含块：每个盒子都有他的包含块，包含块决定了盒子的排列区域
绝大部分呢情况下：盒子的包含块为其父元素的内容盒
块盒：每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto，将剩余空间占满
margin，默认值为0，也可以是auto，当margin和width都为auto时，width占满
若宽度边框内边距外边距计算后，仍然有剩余空间，则被margin-right全部占满
在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto

每个块盒垂直方向上的auto值，
height：auto：适应内容高度
margin：auto：表示0

百分比取值
padding，宽，margin可以取值百分比。（所有百分比相对于包含块的宽度）
高度百分比：
1.包含块高度是否取决于子元素的高度，设置百分比无效
2.包含快的高度不取决于子元素的高度，相对于父元素的高度

上下外边距的合并：
两个常规流块盒，外边距相邻，会导致外边距合并，
然后两个盒子的外边距，设置 取最大值
解决方式：
1.给父元素加boder
2.给父元素加padding

常规流

原文：https://www.cnblogs.com/fhzm/p/13363229.html