如何正确地将背景颜色强加到 div 包装文章和 HTML/CSS 中的一边？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16594773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?
提问by Debugger
I want to give a background color for the portion covered by the articleand the asideonly, so i can give the impression that the asidehas the same height as the article( basically giving the same background color for the asideand the divwrapping both asideand article)
我想为 thearticle和 the asideonly覆盖的部分提供背景颜色，所以我可以给人的印象是aside具有与 the 相同的高度article（基本上为 theaside和divwrap提供相同的背景颜色aside和article）
<div style="background-color:#cccccc" class="clear_fix">
<p> This is where the container starts !!!</p>
<p> Why the div stops here ???!!!!</p>
<article>
<h2> Meanwhile, Let's learn about Tesla </h2>
<p>Tesla's achievements and his abilities as a showman</p>
</article>
<aside>
<h2> Brand-new and Used cars </h2>
<p> Buy your first car starting from 0.99 $.</p>
</aside>
</div>
Here is the style.css related to the tags above.
这是与上述标签相关的 style.css。
article {
width:716px;
background-color:#87ceeb;
box-shadow: 0px 0px 4px 4px #a9a9a9;
padding-top:20px;
float:left;
margin-top: 4px;
margin-bottom: 4px;
}
aside {
width:240px;
float:left;
padding-top:20px;
background-color:#fff5dd;
margin-top:4px;
margin-left:4px;
box-shadow:0px 0px 4px 4px #a9a9a9;
}
.clear_fix {
clear:both;
}
But what i get, is that the background color of the divonly affects the two first ptags.
但我得到的是，背景颜色div只影响前两个p标签。
Obviously, this is not what i intended to do by wrapping everything with a div.
显然，这不是我打算用div.
Do you have an idea why the divbackground color in my case does not extend below the article and theaside` ?
你知道为什么div我的例子中的背景颜色没有延伸到article and theside`之下吗？
Thanks.
谢谢。
回答by Marc Audet
Since you floated the <article>and the <aside>elements, they are out of the flow of the parent <div>.
由于您浮动了<article>和<aside>元素，因此它们超出了 parent 的流<div>。
To the style of the parent element, add the following property: overflow: autoor overflow: hidden.
在父元素的样式中，添加以下属性：overflow: auto或overflow: hidden。
<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">
Why This Works
为什么这有效
The reason the overflowproperty does the trick stems from how the CSS block formatting model works.
overflow属性起作用的原因源于 CSS 块格式模型的工作方式。
Specifically, the relevant specification is:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
具体来说，相关规范为：http:
//www.w3.org/TR/CSS21/visuren.html#block-formatting
Consider the following HTML snippet:
考虑以下 HTML 片段：
<div class="wrap">
<p>Some text...</p>
<div class="floated">Floated text</div>
</div>
In the Basic Case, all of these elements are in normal flow (no floats) and are formatted within the "block formatting context" defined by the root element of the page. So, they basically fill up the width of the page and, being block elements, are stacked one on top of the other.
在Basic Case 中，所有这些元素都在正常流中（没有浮动），并且在页面根元素定义的“块格式上下文”中进行格式化。因此，它们基本上填满了页面的宽度，并且作为块元素，它们一个叠在一起。
Consider Case 1, in which we float .floated. The floated element is no longer in normal flow and it is positioned to the left edge of the parent container and adjacent to the bottom of the paragraph, which is the nearest block level element to the floated element.
考虑案例 1，我们在其中浮动.floated。浮动元素不再处于正常流中，它位于父容器的左边缘并与段落底部相邻，这是离浮动元素最近的块级元素。
The border of the parent element wraps around the normal flow child elements which is why the floated elements juts out (remember, the floated element is ignored when formatting the normal flow elements, which determines the height of the parent container).
父元素的边框环绕普通流子元素，这就是浮动元素突出的原因（请记住，在格式化普通流元素时，浮动元素会被忽略，这决定了父容器的高度）。
Now, in Case 2, let's float .wrap. In this case, the parent element shrinks-to-fit the content, including both the <p>AND the .floatedchild. This is because div.wraphas now established a new block formatting contextand as specified by the CSS rules, must enclosed all the edges of the boxes that it contains (including floats).
现在，在案例 2 中，让我们浮动.wrap。在这种情况下，父元素缩小以适应内容，包括<p>AND.floated子元素。这是因为div.wrap现在已经建立了一个新的块格式上下文，并且按照 CSS 规则的规定，必须包含它所包含的框的所有边缘（包括浮点数）。
Finally, in Case 3, we declare overflow: hiddenon .wrapin normal flow (not floated). Setting overflowto any value other than visiblestarts a new block formatting context. As such, .wrapstill extends the full width of the page AND it now also contains all the edges of any floated child elements, so the border wraps around the floated element.
最后，在Case 3 中，我们在正常流（非浮动）中声明overflow: hiddenon .wrap。设置overflow为除visible启动新块格式上下文之外的任何值。因此，.wrap仍然扩展页面的整个宽度，并且它现在还包含任何浮动子元素的所有边缘，因此边框环绕浮动元素。
Demo Fiddle: http://jsfiddle.net/audetwebdesign/VXL4B/
回答by JAM
It's probably because your clear_fixclass isn't doing its job.
这可能是因为你的clear_fix班级没有完成它的工作。
Check out this FIDDLEwhich just toggles the clearfixclass on the container element. When clearfixisn't set, it looks a lot like what you are experiencing.
查看这个FIDDLE，它只是clearfix在容器元素上切换 类。什么时候clearfix没有设置，它看起来很像你正在经历的。
Use this css for the clearfixclass:
将此 css 用于clearfix该类：
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
