有两个div，因为div没有高度，所以下面的div的margin-top无效

Question

<div class='user-info-container'>
    <div class='user-info'>
    </div>
</div>
<div class='card-info-wrapper'>
        <div class='card-info-container'>
            <div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
        </div>
    </div>

user-info-container类无高度，user-info高度为100px

对card-info-wrapper使用margin-top: 10px 会与user-info-container重叠，怎么解决？

Answer 1

这个应该叫做 外边距合并
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

给外面div这个方向上 加个1px的border或者padding可以

Answer 2

.card-info-wrapper { overflow: hidden }

创建BFC使margin合并失效。

Answer 3

没懂什么意思，是 user-info-container 也设置了 margin 吗，有的话是会有外边距合并的问题，不管 user-info-container有没有设置height，这种情况给user-info-container创建BFC可以解决。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context