在其他 div 浮动的 div 中填充答案

【问题标题】：Padding in a div where other divs are floated在其他 div 浮动的 div 中填充
【发布时间】：2012-06-06 01:19:21
【问题描述】：

这里是 JSFiddle 链接：

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

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

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

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

【问题讨论】：

标签： css html css-float padding

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

您能详细说明一下吗？什么是正常流量？浮动一个 div 是否使它不再有高度和宽度？
@Sergio，正常流程只是事物正常显示方式的一个花哨术语。 DIV 确实有高度和宽度，但包含的 div 并不认为 DIVS 是它的一部分。