之前写了普通流中块级元素的水平格式化和margin一文，整理了普通流中的块级元素在水平方向的格式化，其中重点介绍了七个和宽度有关的属性（margin-left,border-left,padding-left,width,padding-right,border,margin-right），本文接下来介绍块级元素的垂直格式化以及相关的属性，和水平格式化一样，垂直格式化同样存在七个属性，与高度相关，但他们的表现行为在某些方面确大大不同于水平格式化。

垂直方向的包裹性

块级元素的默认高度是由其内容确定的，一个元素的默认高度是刚好包含其所有内容，所以我们称元素在垂直方向具有包裹性，像指定width值一样，也可以通过指定height值为元素显示指定高度。
还记得我们的七个和等于父的宽原则吗，即在水平方向，七个水平方向的属性值得和相加等于父元素的width值，当没有被元素指定width值时，它的width值实际上也已经被确定了，由父元素的width值减去其它六个属性的指定值或默认值即可以得到，可以说width值默认情况下与自身内容是无关的。同样的垂直方向上也存在七个值相加的原则，即margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom相加等于父元素（包含块）的height值，但我们并不能说子元素的height值是由父元素的height值减去其它六个属性值而确定的（尽管这一减法等式确实成立），这是因为这种说法恰好相反了，垂直方向上，真正的逻辑是父元素的height值等于子元素的七大属性值相加的和，这一说法和垂直方向的包裹性也不谋而合了。

垂直方向的auto值

同水平方向一样，垂直方向也有三个属性可以设置为auto,分别是margin-top,margin-bottom和height.

margin-top和margin-bottom设置为auto

不同于margin-left和margin-bottom的补充宽度的作用，margin-top和margin-bottom设置为auto时，会被计算为0。也就是说在垂直方向上，不能通过设置两个margin的值为auto而使得正常流元素在包含块中垂直居中了。有没有很气愤，凭什么垂直方向的margin要失去这个功能？仔细想想，就会觉得这种解析方式可以理解了，我们想想margin-left和margin-right为什么可以来补充宽度呢？因为水平方向的“继承”性，即在水平方向上，父元素的宽度永远是最先确定的，再加上七个属性的和相加等于父元素width这一原则，当然可以直接推断出设置为auto的其他水平属性的值了。那垂直方向呢？没办法，垂直方向是子元素的height相关值先确定，再由子元素的七个属性值相加，才会得到父亲的height值，也就是上节我们提到的包裹性。所以说当为垂直方向的属性设置为auto时，父元素的height还不知道在哪儿呢？由如何根据父亲的height来确定呢？听起来有点绕，但是确实是这样滴

height设置为auto

当普通流块级元素的height值设置为auto时，会稍稍复杂一些，不同场景则由不同的表现

height设置为百分数

把子元素的height设置为百分数，则子元素的高度为父元素的高度乘以这个百分数，这是我们想当然的答案，不过还有一种情况，父元素有可能并没有显示声明height值啊，这个就麻烦了，因为父元素的height值默认情况下还得靠子元素的垂直属性来确定呢，总不能互相依赖吧，只能妥协了，因此这种情况下，尽管为子元素的height设置了百分数，却相当于没有设置，子元素的高度还是依赖于元素本身的内容来确定。

margin-top和margin-bottom设置为百分数

可以想象，如果依赖于父元素的height值乘以百分数得到结果，那么同height属性面临的问题一样，margin-left和margin-bottom设置为百分数也存在当父元素的height未指定互相之间会陷入循环依赖，所以垂直方向的margin设置为百分数时，果断放弃了对父元素height值得依赖，转而依赖于父元素的width值，甚至无论父元素的height是否已经指定了值，都会以父元素的width值为基数来计算。

垂直外边距的合并

垂直格式化的一大特点是垂直外边距的合并，注意有且只有垂直方向的外边距会发生合并，水平方向的外边距不会发生合并，垂直方向的内边距和边框也不会合并。