在其他div浮动的div中填充

Question

这是JSFiddle链接：

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

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

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

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

Answer 1

您需要在浮点后添加清除，如下所示： http : //jsfiddle.net/48yGU/38/
编辑：其从底部溢出的原因是因为float没有大小。 因此容器认为那里什么也没有，只在两边都绘制了填充（这就是为什么看起来线条高度）的原因。 清楚的是它粘在浮子的底部并具有一定的大小，因此将容器底部推到浮子的底部。

Answer 2

这是因为浮动的DIVS不在正常流中，因此填充通常会考虑所包含元素的高度和宽度。