div边界不环绕嵌套的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:bboth"

<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:bboth；"。将修复它。