0
下面是代碼，有解決方案可用於解決我真正感興趣的是爲什麼會發生，什麼是幕後？HTML和CSS：圖像浮動與下面的ul重疊 - 爲什麼
<!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>
我已經看了很多帖子，每個人都似乎有自己的變通，但沒有人解釋爲什麼會出現這種情況，我是這樣做的真正的方法是什麼？