css - 在其他 div float 的 div 中填充

Question

这是 JSFiddle 链接:

http://jsfiddle.net/stapiagutierrez/48yGU/34/

当我在 #middle div 上使用 padding: 10px; 时，我认为这会使内部包含的 div 变小以适应填充。

这是部分正确的，它是从顶部和左/右推出的，但它是从底部溢出的。

对此有何解释，以及针对这种常见情况的解决方案？到目前为止，我已经使用了 overflow: hidden; 但这感觉像是 hack。但也许因为我是 CSS 的新手，这是你应该如何处理它。

Answer 1

您需要像这样在 float 后添加清除:http://jsfiddle.net/48yGU/38/
编辑:它从底部溢出的原因是因为 float 没有大小。所以容器认为那里什么都没有，只是在两侧绘制填充(这就是它看起来行高的原因)。 clear 的作用是它粘在浮子的底部并且有尺寸，所以它将容器底部推到浮子的底部。