浮动：左突破容器div？

Question

我有一个模态框，我试图在彼此旁边放两列，我通过将float：left分配给一个div（.center-columnb）和一个float：right到.map-column来实现。 然而，会发生'center-columnb'用灰色渐变背景打破容器div，好像这个div被放置在容器div下面（注意灰色部分底部的圆角边缘，这意味着在div的底部。 当我从style.css中删除float：left from centercolumnb时，一切都没问题，只是右边的列不再停留在那里了。有没有人有任何可以帮助我的选择？谢谢:)）

Answer 1

您的父div为#contentholder，但此时它不包含其中的浮点数。默认情况下，浮动元素将从文档流中取出，任何父div都将折叠。要使其包含浮动内容，您需要为其提供溢出属性。这应该可以解决问题：

#contentholder {
    overflow: auto;
}

Answer 2

另一种方法是清除Question容器的底部。对于完全跨浏览器兼容的解决方案，只需在结束div之前添加：

<div style="clear:both"></div>