html - 父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

.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

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

一种解决方案是使用以下值添加overflow到您的.sub元素中visible：

.sub { overflow: hidden; }

• jsFiddle 演示

---

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

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

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

• jsFiddle 演示

Answer 4

添加溢出：隐藏在您的父 div 上

.sub
{
    overflow:hidden;
}

您浮动内部 div，因此它们被拉出外部 div 的渲染上下文。您还可以： - 浮动外部 div - 在外部 div 的底部添加一个元素style='clear:both;display:block'

Answer 5

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