IE 模型：box-sizing: border-box
什么是边距重叠呢?
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
在这里父元素的高度不是 110px，而是 100px，在这里发生了高度坍塌。
原因是如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
可以看到 1 和 2,2 和 3 之间的间距不是 50px，发生了边距重叠是取了它们之间的最大值 30px。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
解决上述问题的其中一个办法就是创建 BFC。BFC 的全称为 Block Formatting Context ，即块级格式化上下文。
父子元素的边界重叠得解决方案： 在父元素上加上 overflow:hidden使其成为 BFC。
兄弟元素的边界重叠，在第二个子元素创建一个 BFC 上下文：
父元素#float 的高度为 0，解决方案为为父元素#float 创建 BFC，这样浮动子元素的高度也会参与到父元素的高度计算：
在这里设置右边的高度高于左边，可以看到右边超出的部分跑到左边去了，这是由于由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。
解决方案为给右侧元素创建一个 BFC，原理是 BFC 不会与 float 元素发生重叠。
这是因为右边的图片边框压住了左边的图片边框。边框值设置的是1px，margin-left：-1，向左移动1px就可以了。
如果盒子都没有加定位，可以鼠标悬浮时，给盒子加上相对定位relative属性。因为相对定位的盒子会压住普通盒子，位置没有设置偏移量的话就不会动。
tags: [css]
categories: [css/Less]
该元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height时可能会发生。
以上情况的组合会产生复杂的外边距折叠（普通文档流中块框的垂直边界才会发生边界叠加），行内框、浮动框或绝对定位框之间的边界不会叠加。
参考： 外边距折叠｜MDN
