html - 浮动左禁用填充

Question

两个 div 并排排列，一个向左浮动，宽度为 25%，另一个宽度为 75%。但是当在右侧 div 上应用填充时，填充不能正常工作。

这是一个 JSfiddle 示例：

http://jsfiddle.net/88upt/

<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>

CSS

#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}

有人可以向我解释为什么会这样吗？

谢谢

Answer 1

浮动某物有点像使其位置成为绝对。它将悬停在其相邻容器的顶部。添加一个等于浮动元素宽度的 margin-left 以使容器具有正确的宽度。

http://jsfiddle.net/88upt/4/

#middle {
    background-color: blue;
    padding: 30px;
    min-height: 30%;
    margin-left:25%
}

编辑详细说明。

浮动元素将兄弟元素的内容推到上面。它不会推动内容元素的左侧。填充在那里它只是被浮动元素隐藏。

Answer 2

在#middle 中添加溢出 = "auto" 。

#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}

这样，您就不需要知道浮动元素的宽度。

Answer 3

宽度不考虑填充。

来源：http ://www.w3schools.com/css/css_boxmodel.asp

宽度仅适用于内容，而不适用于填充、边框或边距。

您可以在此处找到更多信息。