动态元素上的CSS打破了布局

Question

目前我有2个子容器元素并排放置。一个是左侧导航菜单，第二个是右侧的内容显示区域。这些都填充在Document.Ready（）函数中，但这样做会导致页面布局中断，因为这些后面的容器不会扩展。

我已尝试设置各种显示元素，例如＆＃34;阻止＆＃34;，＆＃34;内联＆＃34;等等，只是为了看看它是否能解决问题，但到目前为止我还没有运气。任何人都可以提供有关此案例中可能出现的问题的见解吗？

我发现我可以删除＆＃34; float：left＆＃34;从pluginBox但我不再能够在这些元素之间放置空格。

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

这里还有关于＆＃34; clearfix＆＃34;的帖子。 class，通常在容器中包含浮动元素时使用：What is a clearfix?