動態元素上的CSS中斷布局

Question

目前，我有2個子容器元素並排放置。 一個是左側導航菜單，第二個是右側的內容顯示區域。 這些填充在Document.Ready（）函數中，但是這樣做會導致頁面布局中斷，因為這些后面的容器不會擴展。

我試圖設置各種顯示元素，例如“ block”，“ inline”等，以查看它是否可以解決問題，但是到目前為止我還沒有運氣。 誰能提供這種情況下可能出現的問題的見解？

我發現可以通過從pluginBox中刪除“ float：left”來解決此問題，但我不再能夠在這些元素之間放置空格。

CSS：

.containerBox {
    margin: auto;
}
.catBox {
    float: left;
    height: 750px;
    width: 20%;
    overflow: auto;
    margin: 0;
    border: solid black 1px;
}
.pluginBox {
    float: left;
    margin-left: 25px;
    height: 750px;
    width: 75%;
    overflow: auto;
    border: solid black 1px;
}

HTML：

<div id="containerBox" class="containerBox">
    <div id="catBox" class="catBox">
        <ul id="categories" class="cat_menu"></ul>
    </div>
    <div id="pluginBox" class="pluginBox">
        <table id="pluginTable" class="plugin_table">
        </table>
    </div>
</div>

Answer 1

這是因為您要浮動兩個內部容器。

您需要執行類似以下https://jsfiddle.net/564sde36/的操作 ：

.containerBox:after,
.containerBox::after {
  clear: both;
  content: "";
  display: table;
}

這實際上是生成容器后的樣式，並不意味着您需要任何其他html標記。

Answer 2

將隱藏的溢出添加到您的contanerBox

.containerBox { margin: auto; overflow: hidden; }

Answer 3

這也是有關“ clearfix”類的文章，通常在容器內有浮動元素時使用： 什么是clearfix？