1. 边距折叠
根据 BFC 布局规则，“box 在垂直方向上的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象”。
(1) 现象：.div1 的 margin-top 出现在 .root 外层；.div1 的 margin-bottom 与 .div2 的 margin-top 产生边距折叠。
<body>
<div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow;">
<div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;"></div>
<div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div>
</div>
</body>
（2）解决措施：使 .root 形成 BFC；给 .div2 包装一层新的 div ，并触发该 div 元素形成一个 BFC，这样两个标签 .div1 ，.div2 就不再属于同一个 BFC 了。
<body>
<div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;">
<div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;"></div>
<div style="overflow: hidden;">
<div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div>
</div>
</div>
</body>
（3）来看另一种情况，如果 .div2 外层的 div 自身设置了 margin 属性（虽然这并不常见，只是测试一下），并不会对内产生影响，但会和同级的 .div1 产生边距折叠。
<body>
<div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;">
<div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;"></div>
<div style="overflow: hidden; margin: 30px;">
<div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div>
</div>
</div>
</body>
如果不一定要固定使用 margin 实现，就可以改用 padding 且不会产生折叠问题；如果是在原基础上解决，可以参考上面的再在其外层包装一层 div 并使之形成 BFC。
<body>
<div class="root" style="width: 300px; height: 300px; position: relative; background-color: greenyellow; overflow: hidden;">
<div class="div1" style="width: 100px; height: 100px; margin: 20px; background-color: cornflowerblue;"></div>
<div style="overflow: hidden;">
<div style="overflow: hidden; margin: 30px;">
<div class="div2" style="width: 100px; height: 100px; margin: 20px; background-color: coral"></div>
</div>
</div>
</div>
</body>
2. “高度塌陷” 现象
（1）看如下代码，.root 的 height 跟随 .div2 的 height 为 80px。这是因为浮动元素 .div1 的 height 不参与父元素的高度计算，但其自身具有 height 值。
<body>
<div class="root" style="width: 400px; position: relative; background-color: crimson">
<div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;"></div>
<div class="div2" style="height: 80px; background-color: coral"></div>
</div>
</body>
（2）如果 .div1 和 .div2 都为浮动元素，则会造成 “高度塌陷” 现象，.root 的高度为0px，如图所示。（注意：设置 .div2 为向右浮动时，要添加设置宽度。）
<body>
<div class="root" style="width: 400px; position: relative; background-color: crimson">
<div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;"></div>
<div class="div2" style="width: 320px; height: 80px; float: right; background-color: coral"></div>
</div>
</body>
（3）通过使 .root 形成 BFC，可以解决该问题。这是根据 BFC 规则，“浮动元素的高度也参与 BFC 的高度计算”，此时 .root 的高度取其最大值为 150px。
<body>
<div class="root" style="width: 400px; position: relative; background-color: crimson; overflow: hidden;">
<div class="div1" style="width: 80px; height: 150px; float: left; background-color: cornflowerblue;"></div>
<div class="div2" style="width: 320px; height: 80px; float: right; background-color: coral"></div>
</div>
</body>
