在其他div浮动的div中填充

Question

这是JSFiddle链接：

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

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

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

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

Answer 1

你需要在浮动之后添加清除：http://jsfiddle.net/48yGU/38/
编辑：它从底部溢出的原因是因为float没有大小。因此容器认为那里什么也没有，只是在两侧绘制填充物（这就是为什么它看起来像是行高）。什么清楚的是它粘在浮子的底部并且有尺寸，所以它将容器底部推到浮子的底部。

Answer 2

这是因为浮动的DIVS位于正常流量之外，其中填充通常会考虑所包含元素的高度和宽度。