测试源码：
<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 right”><p>浮动元素3</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; }
/* 样式改变 */
.noFloat + .float { width: 100%; /* 此处是为了让第二个div必须在第一个div下面，因其本本身是浮动元素，使用清除浮动无效 */}
6、浮动规则6：
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
进一步限制元素的向上浮动。
测试源码：
<div class=”wrapper”>
<div class=”main”>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
<div class=”float right”><p>浮动元素1</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; }
/* 样式改变 */
.right { width: 100px ; height: 30px; }
7、浮动规则7：
左（右）浮动元素的左（右）边有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右（左）边，即浮动元素不能超出其包含元素的边界，除非它太宽本身无法放下。
如果没有足够的空间，浮动元素会被“挤”到新行上。
