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：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;”。 將修復它。