html - 原始样式不会扩展到 float 子部分后的子元素

Question

我最初有一个 with one 并且想把它变成一个有两个部分的 div，一个占 75%，另一个占 25%；像侧边栏。它是这样设置的，各部分内部有各种元素。

<div class="content">
    <section class="cs_one"> ... </section>
    <section class="cs_two"> ... </section>
</div>

最初，内容部分的样式带有背景、边框和阴影，使其具有这种外观。

.content {
    margin: 0 auto; /* Center content */
    padding-top: 150px; /* Move down from under fixed header */
    width: 1000px; 

    background-color: #D9C293;

    ... Border and box shadow styling omitted...
}

然后我添加了这些代码行将这些部分分成两部分，使其呈现出这种不受欢迎的外观。红色箭头显示上一个内容框(带有框阴影)在图像之后结束的位置(在内容 div 内的两个部分之前。

.cs_one { width: 75%; float: left; }
.cs_two { width: 25%; float: right; }

content div 的样式不会在这两个部分下扩展。为什么？我该如何解决这个问题。

Answer 1

当元素 float 时，其父元素不再包含它，因为 float 元素已从流中移除。 你应该使用 .clearfix

.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}