在这个question中有人遇到布局问题，因为他们在非浮动div中有两个浮动div。我建议将float: left添加到其外部div中，这样可以解决问题。其他人建议添加overflow: hidden，令我惊讶的是，它也有效。
这似乎与overflow: hidden的目的完全不同。显然溢出：隐藏导致元素以某种方式以不同方式查看他们的孩子。我真正想要了解的是 这个区别是什么。直观地说，它应该只使元素小于原来的元素，从不大，我不明白为什么它会影响布局层次结构。
任何人都可以解释为什么这是正确/必要的行为，或者这只是一个浏览器怪癖？他们的另一个方面是我失踪的溢出财产吗？两种解决方案都比另一种更好吗？
编辑：我发现设置overflow: auto也是有效的，所以它似乎不是溢出的重要值，只是设置它。我仍然不明白为什么。
答案 0 :(得分：15)
除visible之外的任何内容溢出都会创建一个新的块格式化上下文，从而导致浮点数被包含。这是标准行为。
漂浮，绝对定位 元素，内联块，表格单元格， 表格标题和元素 '溢出'除了'可见'以外 （除非该值已经存在 传播到视口）建立 新的块格式化上下文。
在块格式化上下文中，框 一个接一个地布置， 垂直，从顶部开始 包含块。垂直的 两个兄弟箱之间的距离是 由'保证金'属性决定。 相邻之间的垂直边距 阻止块格式化 语境崩溃。
在块格式化上下文中，每个 盒子的左外边缘接触左边 包含块的边缘（用于 从右到左格式化，右边缘 触摸）。即使在这个问题上也是如此 浮子的存在（虽然是一个盒子 线盒可能因此而缩小 浮动），除非盒子建立了 新块格式化上下文（其中 盒子本身可能会变成 由于浮子而变窄了。
答案 1 :(得分：0)
浮动项在许多情况下将其从正常布局中删除。它与position: absolute;不完全相同或不同。块项目往往忽略浮动项目（包括包含项目的块项目），但与position: absolute;项目不同，浮动项目被内联项目识别和包裹，如文本。
使包装项（div或其他）也被浮动会导致它与其包含的浮动项目的行为不同。将包装项设置为overflow: hidden;会强制它以不同的方式考虑它包含的项目。我的猜测是，这里的最终结果看起来是一样的巧合。不是怪癖或错误...它是如何运作的。