Float-left禁用填充

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中添加 overflow =“auto”。

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

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

Answer 3

宽度不考虑填充。

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

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

您可以找到更多information here.