Css 为什么overflow:hidden会产生意想不到的副作用，增加高度以包含浮动元素？

这个问题最好用以下HTML来解释：

CSS:

.outer{
宽度：100px；
边框：实心5px#000；
}
.左内侧{
浮动：左；
高度：200px；
宽度：50px；
背景：#f00；
}
.内右翼{
浮动：对；
高度：200px；
宽度：50px；
背景：#0f0；
}

---

基本上，我想知道为什么

溢出：隐藏的
会导致外部元素的高度增加，包括两个浮动的元素？
简单地说，这是因为带有
溢出的块框
不可见（默认设置）会创建一个新的

如果创建新块格式上下文的框本身没有指定的高度，则将其定义为，默认为
auto
（规范称这些框为块格式上下文根）：

10.6.7块格式上下文根的“自动”高度
在某些情况下（例如，见上文第10.6.4节和第10.6.6节），建立块格式上下文的元素高度计算如下：

[……]

此外，如果元素有任何浮动子体，其底部边距边缘低于元素的底部内容边缘，则高度将增加以包括这些边缘。仅考虑参与此块格式上下文的浮点，例如绝对定位子体内的浮点或其他浮点不考虑

在最初的CSS2规范中，情况并非如此，而是作为对CSS2.1的一项更改而引入的，以应对一个不同的（更紧迫的）问题。提供了更改的解释。出于这个原因，它似乎很容易称之为副作用，尽管这些变化是非常有意的

还要注意，这与清除浮动（清除）不同。只有在使用
clear
属性且之前存在要清除的浮动时，才会清除浮动：


如果您有一个元素具有
clear:both
，在您的示例中它是外部元素的同级元素，则浮动将被清除，但外部元素将不会拉伸


如果您有一个类似的元素（或伪元素）作为外部元素的最后一个子元素（使其成为浮动的后续同级元素），则外部元素将向下延伸以包含该元素的底部边缘，对于零高度元素，基本上意味着浮动的最底部边缘。这种技术被称为“clearfix”，因为元素（或伪元素）除了通过内部的间隙迫使外部元素包含浮动之外没有其他用途


我向学生解释的方式是：

你通过告诉他“一切都太多了，不要显示”来触发包含浮动的元素，因此元素将查找任何太多的内容，他将找到一些浮动的元素，现在他知道他应该包含它们。
我不知道，但我知道是浮动导致它崩溃。使用这样的包装器时，必须清除浮动。有很多解决办法。这里有一个：@Camhänget:或者他可以选择不清除浮动并使用
overflow:hidden
，如图所示。也就是说，我编辑了我的答案，加入了一个关于clearfix的注释-这里描述的问题不是clearfix。你需要澄清的是，这只适用于浮动元素，因为任何其他元素都会被隐藏（这就是
溢出的点：隐藏的
）。“将找到一些浮动的元素”我想那就行了？；-）很好的解释。我的问题：是否有理由不使用
溢出：隐藏
，这意味着它是否有副作用，导致我们在它上面使用clearfix技术？或者可以安全地使用？@TetraDev:通常有两个原因1）它在tin上所说的完全一样-您不希望溢出的内容被剪裁（或者在溢出的情况下：auto，您不希望容器元素生成滚动条）2）您希望非浮动元素的边距随容器元素一起折叠（假设已经没有其他东西可以阻止保证金崩溃）。在这种情况下，使用清算元素是合适的-我建议在考虑将clearfix作为最后手段之前，先寻找一个合适的元素来应用clear to。@TetraDev:（有趣的是，一些像尼古拉斯·加拉赫（Nicolas Gallagher）的clearfixes，使得#2有些毫无意义。）