为什么我的ul底部没有保证金

Question

没有

元素浮动，但只有下边距显示在包含的div之外。这是什么原因，我该如何修复它，以便保证金在其容器内位于 ul 上？

http://jsfiddle.net/krcoxq0v/1/

.html

<div class="box">
    <h2>Title</h2>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
</div>

.css

div {
    background:#aaa;
    width:300px;
}
ul {
    margin:25px;
    padding:0;
    background:#ddd;
}
li {
    list-style:none;
}

Answer 1

将overflow:hidden;添加到顶级div

演示小提琴

div {
    background:#aaa;
    width:300px;
    display:block;
    overflow:hidden;
}
ul {
    margin:25px;
    padding:0;
    background:#ddd;
}
li {
    list-style:none;
}

这将强制实施块格式上下文

块格式上下文是 网页。它是块框布局发生的区域 以及其中浮标相互相互作用。

Answer 2

在

div css 中添加overflow:hidden;。