浮动：左打破容器div？答案

【问题标题】：Float: left breaks container div?浮动：左打破容器div？
【发布时间】：2016-04-12 16:12:21
【问题描述】：

我有一个模态框，我试图将两列并排放置，我通过将 float: left 分配给一个 div (.center-columnb) 并将 float: right 分配给 .map-column 来做到这一点。然而，会发生什么是'center-columnb'打破了具有灰色渐变背景的容器div，就好像这个div被放置在那个容器div下（注意灰色部分底部的圆形边缘，这意味着在div 的底部。当我从 style.css 中删除来自 centercolumnb 的 float: left 时，一切都很好，只是右侧的列不再留在那里。有没有人有任何可以帮助我的替代方案？谢谢:)

【问题讨论】：

标签： html css

【解决方案1】：

您有一个 #contentholder 的父 div，但此时它不包含其中的浮点数。默认情况下，浮动元素会从文档流中取出，并且任何父 div 都会折叠。为了让它包含浮动，你需要给它一个溢出属性。这应该可以解决问题：

#contentholder {
    overflow: auto;
}

【讨论】：

是的。如果这会创建一个滚动条，请尝试溢出：隐藏；
你知道吗？你解决了我这两天一直在思考的问题。非常感谢 DA、Michelle 和粉丝的最爱 :)))))) 很高兴现在可以正常工作了！

【解决方案2】：

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

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

【讨论】：