这是代码，有一些解决方案可用于解决我真正感兴趣的问题，即为什么会发生这种情况，幕后发生了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo CSS3</title>
<style>
p
{
color: #000000;
font-size: medium;
font-family: 'Segoe UI';
}
h1
{
color: #ff0000;
font-size: x-large;
font-family: 'Segoe UI';
}
h2
{
color: #0000ff;
font-size: larger;
font-family: 'Segoe UI';
}
footer p
{
font-size: x-small;
}
.entry-content :first-child {color:brown}
ul :nth-child(odd) {background-color : yellow }
ul :nth-child(even) {background-color : blue}
.aside-body p:nth-of-type(odd) {background-color : yellow }
.aside-body p:nth-of-type(even) {background-color : pink }
.wholePage{
font-family: 'Segoe UI', Arial, Helvetica, san-serif;
font-size: 18px;
color: #0000ff;
width: 700px;
margin: 5 auto;
}
.aside{
float:right;
width:170px;
margin-top:50px;
}
.mainsection{
margin:180px;
background:gray;
}
.mainsection img{
float:right;
width:150px;
height:150px;
margin:5px;
}
</style>
</head>
<body class="wholePage">
<aside class="aside">
<section class="aside-header">
<h2>About HTML5</h2>
</section>
<section class="aside-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce porta lorem rhoncus, rhoncus orci sed, auctor nisl.
Etiam rutrum risus tellus, eu interdum tortor porttitor ut.
Praesent et nisl tincidunt lorem suscipit laoreet vel non turpis.
Vivamus hendrerit vel neque at varius.
Donec tempus, sapien at fermentum pulvinar, orci mauris tempor dolor,
non mattis magna lectus et augue.
Vivamus ut diam enim. Fusce nec dui arcu.
Duis luctus odio ligula, vitae pharetra nisi cursus ut.
Nam id neque pulvinar tortor laoreet laoreet sed at sem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce porta lorem rhoncus, rhoncus orci sed, auctor nisl.
Etiam rutrum risus tellus, eu interdum tortor porttitor ut.
Praesent et nisl tincidunt lorem suscipit laoreet vel non turpis.
Vivamus hendrerit vel neque at varius.
Donec tempus, sapien at fermentum pulvinar, orci mauris tempor dolor,
non mattis magna lectus et augue.
Vivamus ut diam enim. Fusce nec dui arcu.
Duis luctus odio ligula, vitae pharetra nisi cursus ut.
Nam id neque pulvinar tortor laoreet laoreet sed at sem.</p>
</section>
</aside>
<div class="mainsection">
<article id="post-5946">
<section id="post-5946-header">
<h1 class="entry-title">8th Pluralsight Course:
HTML5 From Scratch</h1>
<div class="entry-meta">
<span class="meta-prep">Posted on July 14, 2013</span>
<span class="meta-sep">by</span>
<span class="author">Jesse Liberty</span>
</div><!-- .entry-meta -->
</section>
<section class="entry-content">
<p>
<a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
HTML5 From Scratch</a>
<img alt="html5" title="html5" src="http://jesseliberty.com/wp-content/uploads/2013/07/html5_thumb.jpg" width="134" height="136"/>
Very proud to announce my latest Pluralsight Course:
</p>
<p><a href="http://www.html5rocks.com/en/">HTML5f</a>
is the markup language of the web that has taken the world by storm.
In this “from scratch” course,
I demonstrate all you need to know about what’s new in HTML5 to get started
creating world-class web sites
</p>
<p>
asdf
<a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
HTML5 From Scratch</a>
sdf
</p>
<p>
<a href="http://blog.pluralsight.com/2013/07/10/new-course-html5-from-scratch/">
HTML5 From Scratch</a>
<img alt="html5" title="html5" src="http://jesseliberty.com/wp-content/uploads/2013/07/html5_thumb.jpg" width="134" height="136"/>
Very proud to announce my latest Pluralsight Course:
</p>
<p>here you go!</p>
<ul>
<li>option 1</li>
<li>asdfasf</li>
<li>sdfasdfa</li>
<li>asdfasdf</li>
<li>asdfasf</li>
</ul>
</section>
</article>
</div>
<footer class="footer">
<p>Copyright 2013 Jesse Liberty</p>
</footer>
</body>
</html>
我看了很多帖子，每个人似乎都有自己的解决方法，但没有人解释为什么会发生这种情况，真正的做法是什么？
最佳答案
尝试 .entry-content p { overflow: hidden; }(即包含 float 元素的元素被强制以这种方式也包裹其中的 float )
关于HTML 和 CSS : Image floated right overlaps with ul below - WHY，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42450801/