我有以下简单的HTML布局
.section1 {
background: red;
}
.section2 {
background: green;
}
.section3 {
background: yellow;
}
article {
float: left;
width: 33%;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
第二和第三部分是重叠的，我做错了什么？
答案 0 :(得分：1)
这归因于float性质。您需要clearfix使用section2：
/* clearfix */
.section2:after {
content: "";
display: table;
clear: both;
}
演示：
.section1 {
background: red;
}
.section2 {
background: green;
}
/* clearfix */
.section2:after {
content: "";
display: table;
clear: both;
}
.section3 {
background: yellow;
}
article {
float: left;
width: 33%;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
但是你可以使用更现代和更强大的flexbox方法而不是float s（所以你可以删除float个样式）：
.section1 {
background: red;
}
.section2 {
display: flex; /* new */
flex-wrap: wrap; /* new */
background: green;
}
.section2 p {
width: 100%; /* new */
}
.section3 {
background: yellow;
}
article {
width: 33%;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
答案 1 :(得分：0)
这应该比浮动更好：
article {
display: inline-block;
width:32%;
vertical-align: top;
}
答案 2 :(得分：0)
您遇到的问题是，当浏览器计算其位置和布局时，具有float属性的元素将从文档的正常流程中删除。
有两种简单的方法可以解决这个问题，第一种方法是将overflow: hidden;设置为CSS中的父元素（在本例中为<section>元素）：
section {
overflow: hidden;
}
.section1 {
background: red;
}
.section2 {
background: green;
}
.section3 {
background: yellow;
}
article {
float: left;
width: 33%;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
另一种方法是使用伪元素或添加的子元素设置为clear: both;，这将强制该元素在浮动内容后显示，而不是浮动自身，这迫使浏览器在布局中包含该元素的位置;首先，使用添加的子元素：
section::after {
/* newline character: */
content: "\A";
/* forcing the element/pseudo-element to
take 100% of the width of the parent;
this could be replaced with:
display: inline-block;
width: 100%;
but that's unnecessarily verbose and
may cause problems because of padding
and margins */
display: block;
/* forcing the element/pseudo-element to
clear the preceding floats */
clear: both;
}
section::after {
content: "\A";
display: block;
clear: both;
}
.section1 {
background: red;
}
.section2 {
background: green;
}
.section3 {
background: yellow;
}
article {
float: left;
width: 33%;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
然而，由于问题在于使用float，因此通过避免问题更容易解决问题。以下方法使用CSS flex-box来防止出现问题：
.section1 {
background: red;
}
.section2 {
background: green;
/* initiates the flex-box layout: */
display: flex;
/* allows the flex-item children
to wrap to form a multi-row/column
layout: */
flex-wrap: wrap;
/* setting the flex axes, and layout,
to be row-based: */
flex-direction: row;
}
.section3 {
background: yellow;
}
.section2 p {
/* defines how much the element
will grow relative to other
elements in the layout; this
sets the <p> element to 100%
width: */
flex-grow: 100%;
/* defines how much the element
can shrink relative to other
elements in the layout: */
flex-shrink: 1;
}
.section2 article {
flex-grow: 33%;
flex-shrink: 1;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>
最后，使用CSS网格布局：
.section1 {
background: red;
}
.section2 {
background: green;
/* sets the grid layout, the child elements
are automatically set to
'display: grid-item': */
display: grid;
/* defines two rows, each with a 'size' of
'min-content'; this causes the row to be
large enough to show the content without
the author needing to guess (or discover)
the rendered height of the element: */
grid-template-rows: repeat(min-content, 2);
/* defines three columns, each the size of
1fr (one fractional unit of the width
available): */
grid-template-columns: repeat(1fr, 3);
}
.section3 {
background: yellow;
}
.section2 p {
/* places the element in the
first grid-row: */
grid-row: 1;
/* places the element in the
first grid-column, and spans
all three of those columns: */
grid-column: 1 / span 3;
}
.section2 article {
/* places the elements in the
second grid-row; we don't define
which of the columns the elements
are placed in, instead leaving the
browser to place them automatically: */
grid-row: 2;
}<section class="section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
</p>
</section>
<section class="section2">
<p>
Section 2 content
</p>
<article>
Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </article>
<article>
Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
<article>
Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</article>
</section>
<section class="section3">
Section 3 content
</section>