div border不包围嵌套的div

Question

我遇到了我设计的布局问题。有问题的部分是div id =“menu”，我在其中设置了

#menu {border-bottom:solid}

边框不包围嵌套内容（另一个div和ul菜单），而是位于其上方。例子：

http://jsfiddle.net/Amct3/2/

Answer 1

在“菜单”

之后清除浮动

添加此代码

#menu:after {
  content:"";
  clear: both;
  display: table;
}

Answer 2

你需要清理你的花车。

在容器下添加另一个div，其样式为“clear：both”

<div id="menu">
    <div class="container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
    <div style="clear:both;" />
</div>

Answer 3

你可以从“#menu ul”中删除“float：left”，而不是“height：40px; clear：both;”。将解决它。