7

我想为 thearticle和asideonly 覆盖的部分提供背景颜色，所以我可以给人的印象是 与 theaside具有相同的高度article（基本上为 theaside和div包装都提供相同的背景颜色asideand 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>

这是与上述标签相关的 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;
}

但我得到的是，div唯一的背景颜色会影响前两个p标签。

在此处输入图像描述

显然，这不是我打算用div.

你知道为什么div我的背景颜色没有延伸到article and the旁边吗？

谢谢。

4

2 回答 2

16

由于您浮动<article>和<aside>元素，因此它们超出了 parent 的流程<div>。

在父元素的样式中，添加以下属性：overflow: auto或overflow: hidden.

<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">

为什么这样有效

属性起作用的原因overflow源于 CSS 块格式化模型的工作原理。

具体来说，相关规范为：
http ://www.w3.org/TR/CSS21/visuren.html#block-formatting

考虑以下 HTML 片段：

<div class="wrap">
    <p>Some text...</p>
    <div class="floated">Floated text</div>
</div>

在Basic Case中，所有这些元素都处于正常流程中（无浮动），并在页面根元素定义的“块格式化上下文”中进行格式化。因此，它们基本上填满了页面的宽度，并且作为块元素，它们一个一个地堆叠在另一个之上。

考虑案例 1，我们在其中浮动.floated。浮动元素不再处于正常流动状态，它位于父容器的左边缘并与段落底部相邻，这是离浮动元素最近的块级元素。

父元素的边框环绕正常流程子元素，这就是浮动元素突出的原因（请记住，格式化正常流程元素时会忽略浮动元素，这决定了父容器的高度）。

现在，在案例 2中，让我们浮动.wrap。在这种情况下，父元素会缩小以适应内容，包括<p>AND.floated子元素。这是因为div.wrap现在已经建立了一个新的块格式化上下文，并且按照 CSS 规则的规定，必须包含它包含的框的所有边缘（包括浮动）。

最后，在案例 3中，我们在正常流程中声明overflow: hidden（.wrap非浮动）。设置overflow为除visible启动新块格式化上下文之外的任何值。因此，.wrap仍然扩展了页面的整个宽度，并且它现在还包含任何浮动子元素的所有边缘，因此边框环绕浮动元素。

演示小提琴：http: //jsfiddle.net/audetwebdesign/VXL4B/

于 2013-05-16T18:37:45.507 回答
0

这可能是因为你的clear_fix班级没有做好它的工作。

查看这个FIDDLE，它只是 clearfix在容器元素上切换类。未设置时clearfix，它看起来很像您正在经历的。

将此 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%;
}
于 2013-05-16T18:39:28.383 回答