margin垂直高度坍塌成因
初学html+css时margin-top造成的高度坍塌（这里暂时称为坍塌）属于首类要自己思考查找资料才能理解的问题，这里做个记录。
margin-top坍塌表现为子元素的margin-top数值作用于父元素上，对于布局产生影响。
来理解一些名词定义：段落，毗邻，盒模型。
再此之前需要知道，标签具备各自独特的样式不是因为天生如此，而是不同的标签在浏览器中被赋予了各自的样式，以达到“语义化”的要求。例如，div标签在浏览器中默认设置样式display：block；成为了块元素，拓展：因为这种样式设置方式，程序编写者方便在编程前设置各自的reset.css,适应不同风格的页面样式。
段落：以ｐ标签为例，默认样式设有行高line-height：1.12;(不同浏览器行高默认有差异)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p>测试文档1</p>
<p>测试文档2</p>
</body>
</html>
这里看出，第一个p标签的底部与第二个p标签的顶部重合。
浏览器默认样式设置时将垂直高度的margin-top和margin-bottom的数值合并计算，假设没有合并计算，两个p标签之间的空隙之大，“不堪入目”。
为什么不采用小行高呢？不采用小行高出于两点考虑：一，行高过小，第一个p标签与顶部的距离将会在视觉上呈现较差的效果；二，行高不合并，在页面出现多种行高类型时，需要编程者自己计算上下块级，增加编程繁琐度。
如此看来，“坍塌”出现的根本原因是站在编程者的立场进行考量。那么，到这里就请不要将其称为坍塌，称为合并或者重合更合理一点，不是么？
上文解释了垂直元素间距重合可以理解，那么margin-top的重合发现在父子元素之间，同理可行么？
毗邻：css2.1中的定义，毗邻元素包含父子元素及兄弟元素。
这里推理出margin上下值的重合发生在毗邻元素间，即不仅是兄弟元素，还有父子元素。
毗邻一词的解释为相邻接。
可能有读者不是很清楚，明明是子元素margin-top父元素，怎么就相接了呢？
引出盒模型：一个盒子由四个部分组成，由外及内margin、border、padding、content，margin是盒子的最外层。
打一个比喻，margin-top或者margin-bottom的数值就相当于一个人伸出去用来阻挡别人靠近自己的双手，数值大小即收伸出去的长短，手是不是人的一部分呢？
拓展：页面即一个又一个的盒子组成，作为编程者，与“盒子精”纠缠，对其多了解一分自己就少一分可能到来的“痛苦”。
以上是对成因的解释，看完这些，对margin-top的认知应该有所改变。
既然出现了这种情:况，当然有解决方法。
BFC:即 Block Formatting Contexts (块级格式化上下文)，是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。（具体解释请查阅网上资料）
解决方式，产生BFC（下列方式中列举值不为全部，仅是常用量）：
1.根元素html；
2.float值left、right；
3.position值relative、absolute；
4.overflow值hidden、auto（以body为父元素，此项BFC失效，为什么？）；
5.display值inline-block、 table-cell 、 flex 、 table-flex；
综上：margin垂直数值取大值建议叫做重合而不是坍塌；实际运用盒子推荐上下间距用padding，左右间距用margin，无法避免margin的情况，视具体条件设置BFC。
延伸：1.现代浏览器采用是W3C盒模型（标准盒子），代码设置的width、height仅仅是盒子中content的宽高，使用padding会撑大盒子，可以使用box-sizing：border-box；将标准盒子转为IE盒子，即width、height大小为border+padding+content。（推荐查阅网上资料）
2.曾见过一个帖子，询问body和html元素究竟哪个是BFC元素，以下提供实验：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body,div{margin: 0;padding: 0;}
html{background-color: yellow;}
body{width: 100%;height: 100%; background-color: cornflowerblue;}
div{width: 100px;height: 100px;margin-top: 100px; background-color: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以看出，body与div父子元素的margin-top重合，html元素自成一体，即BFC。
以上内容为本人自行探索，难免错漏。写出来一方面用于交流，另一方面期盼高手过路能随意指点两手，指出本人理解有误之处，不胜感激！