在浮动子节之后，原始样式不会扩展到子元素

Question

我最初有一个有一个，并希望它成为一个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; }

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

Answer 1

当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。 您应该使用.clearfix

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

Answer 2

你必须清除漂浮物。 尝试在<div class="clear-float"></div>之后添加<section class="cs_two"> ... </section> 然后在你的css中添加这个

.clear-float {
    clear: both;
}