避免垂直方向高度margin合并（2种）

问题

同一个BFC中的块元素，垂直方向的margin会合并（大的吞并小的）。比如两个元素 A 和 B

<div class="A"></div>
<div class="B"></div>

.A { margin: 5px; }
.B { margin: 15px; }

解决方法

方法一

• 用一个外围块元素C包裹A或者B
• 给C加上overflow：hidden

<div class="A"></div>
<div class="C">
    <div class="B"></div>
</div>
.A { margin: 5px; }
.C { overflow: hidden; }
.B { margin: 15px; }

原理：用一个新的BFC包裹自己，利用BFC的特性（独立区域、内外不影响）的特点，让外部元素不能进入BFC中

缺点：和清除浮动那里一样，如果有元素想显示出来，就和overflow：hidden冲突了

方法二

• 还是用一个外围块元素C包裹A或者B
• 在C的before或者after（包裹上方用after，下方用before）加入

 C::before{ content: ""; display: table; height: 0 }

原理：在两个元素之间加入一个平级的BFC（display：table），margin无法穿透过去 优点：不隐藏内容，也不会添加新元素，也不影响高度