Question

在以下代码中，#wrapper div包含#left和#right div。但它们并不会被包含在#wrapper div中。

我希望将它们视为#wrapper div的内容，因此它们包含在其中，将10px padding应用于#wrapper。他们为什么会流离失所？

<div id="wrapper">
    <div id="left">Alpha</div>
    <div id="right">Bravo</div>
</div>

CSS如下。

#wrapper {
    background-color:grey;
    border-top: 1px solid black;
    border-botton: 1px solid black;
    padding:10px;
}
#left {
    background-color:yellow;
    float:left;
}
#right {
    background-color:pink;
    float:right;
}

我想在不操纵#wrapper的位置属性的情况下解决这个问题，因为这可能会破坏我页面的正常结构（我很害怕）。

Answer 1

因为你是浮动他们所以他们坐在DOM流程之外。如果您希望父级考虑它们，请将overflow: hidden添加到父级CSS，或者使用规则clear: both;

在容器底部添加div

演示：http://jsfiddle.net/cros1mrv/1/

Answer 2

您应该将包装器的溢出设置为overflow: auto，以便在浮动div周围流动。

#wrapper {
    background-color: grey;
    border-top: 1px solid black;
    border-botton: 1px solid black;
    padding: 10px;
    overflow: auto;
}

请参阅this fiddle。

Answer 3

因为漂浮。清除它的一种方法是使用：

#wrapper {
    overflow: hidden;
}

为什么我的div未被放置＆＃34;内部＆＃34;包装div？

3 个答案: