测试源码：
<div class=”wrapper”>
<div class=”main”>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
<div class=”float left”><p>浮动元素1</p></div>
<div class=”float left”><p>浮动元素2</p></div>
<div class=”float left”><p>浮动元素3</p></div>
<div class=”float left”><p>浮动元素4</p></div>
<div class=”float left”><p>浮动元素5</p></div>
<div class=”float left”><p>浮动元素6</p></div>
<div class=”float left”><p>浮动元素7</p></div>
<div class=”float left”><p>浮动元素8</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
</div>
</div>
样式：
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; }
.main { border: 1px solid #999; padding: 1px; float: left; /* 为了让包含子浮动元素的父元素显示出来，可以设置此父元素浮动 */}
.noFloat { border: 1px solid #333; color: gray;}
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; }
.left { float: left; }
.right { float: right; }
8、浮动规则8：
满足其他约束条件时，浮动元素必须尽可能高的放置。
浮动元素的顶端应当与其标记所在的行框（行高中提出的概念）的顶端对齐。
测试源码：
<div class=”wrapper”>
<div class=”main”>
<div class=”float left”><p>浮动元素1</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
<div class=”float left”><p>浮动元素2</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
</div>
</div>
样式：
.wrapper { background-color: #EEE; border: 5px solid #999; margin: 0 auto; padding: 20px; width: 90%; overflow: auto; }
.main { border: 1px solid #999; padding: 1px; float: left; /* 为了让包含子浮动元素的父元素显示出来，可以设置此父元素浮动 */}
.noFloat { border: 1px solid #333; color: gray;}
.float { background-color: #FFF; border: 1px solid #AAA; width: 200px; height: 200px; }
