垂直方向margin溢出（5种）

问题

子(项目)元素有margin-top，会超过父(容器)元素范围，变成父元素的margin-top，父子元素之间依然没有margin-top。这是我们不想要的。

<div class="father">
    <div class="son"></div>
</div>
<style text="text/css">
    .father { margin-top: 5px; }
    .son { margin-top: 15px; }
</style>

方法一：父元素添加overflow：hidden

    .father { overflow: hidden }

原理：还是BFC的问题，把父元素变成BFC，子元素的属性无法突破父元素的限制

缺点：overflow：hidden的缺点永远只有一个，是存在子元素希望脱离文档流，在外部显示

方法二：父元素顶部加上透明border

    .father { border-top: 1px solid transparent }

注意：这里的border设置0px是无效的

原理：这里不是BFC，是利用border自身无法穿透，从而实现阻止margin溢出

缺点：border会增大父元素的实际大小。导致布局错乱

方法三：父元素用padding-top代替

.father { padding-top: 5px; }

原理：同样不是利用BFC，是利用padding阻止margin溢出 缺点：对父元素的高度有影响 解决：修改box-sizing：border-box（怪异盒子模型）

方法四：父元素顶部添加空table

<div class="father">
    <table></table>
    <div class="son"></div>
</div>

原理：显而易见，还是利用BFC，下方的margin不能进入空table（BFC元素）中，从而阻断了margin到上面去

缺点：多了一个看不见的空元素，干扰查找

方法五：父元素添加伪元素

    .father::before {
        content: "";
        display: table;
        height: 0;
    }

原理：和方法四一样，同时规避了方法四的缺点

优点：既不隐藏内容（overflow: hidden）,有不添加新元素（table），又不影响高度（border）

总结

整体还是利用1.BFC（方法一、四、五）；2.防止穿透（border、padding）的方式