父母Div背景不填充孩子

Question

为什么父div的背景中的图像没有填充子div？

问题在于：

http://jsfiddle.net/45jQm/

.sub
{
    border: 1px dashed #f00;
    padding: 5px;
    background:url('http://jpdevtest.com/vandermill/images/home-page-background.jpg') no-repeat;
    background-size: 100%;
}

.subtext
{
    float: left;
    width: 300px;
    height: auto;
    border: 1px dashed #0f0;
}

.homeimage
{
    float: right;
    width: 300px;
    height: auto;
    border: 1px dashed #0f0;
}

谢谢！

Answer 1

.subtext和.homeimage已浮动，不再处于正常流程中，导致其容器忽略它们而不是与它们一起成长。

您可以添加overflow: auto;以在.sub

中创建新的block-formatting context

.sub {
border: 1px dashed #f00;
padding: 5px;
background:url('http://jpdevtest.com/vandermill/images/home-page-background.jpg') no-repeat;
background-size: 100% 100%;
overflow: hidden;
}

http://jsfiddle.net/45jQm/1/

Answer 2

你必须清除漂浮物。两个选项：

1。使用clear: both添加元素：

<div class="clr"></div>

http://jsfiddle.net/45jQm/2/

2。更多语义，在父容器上使用clearfix类：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* For IE 6/7 */
.clearfix {
    zoom: 1;
}

http://jsfiddle.net/45jQm/3/

Answer 3

问题是必须清除浮动元素以使父元素完全包含浮动的子元素。尝试将overflow:hidden添加到您的.sub规则中。

Answer 4

添加溢出：隐藏在父div

上

.sub
{
    overflow:hidden;
}

你浮动内部div，所以它们被拉出外部div的渲染上下文。你也可以： - 浮动外部div - 使用style='clear:both;display:block'

在外部div的底部添加一个元素

Answer 5

这是因为.sub个孩子都浮动。所以你需要 clearfix 。

一种解决方案是向overflow元素添加.sub，其值不是visible：

.sub { overflow: hidden; }

• jsFiddle Demo

---

另一个解决方案是在所有孩子之后添加一个clear: both;样式的元素：

<div class="sub">
    <div class="subtext"></div>
    <div class="homeimage"></div>

    <div style="clear: both;"></div>
</div>

• jsFiddle Demo