HTML结构：
<div class=”wrapper”>
<div class=”main”>
<div class=”float left”><p>浮动元素1
</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。
</p>
</div>
<div class=”float right”><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; }
.left { float: left; }
.right { float: right; }
/* 样式改变 */
.wrapper { width: 600px; }
.float { width: 400px; }
4、浮动规则4：
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个元素时就好像在两个元素之间有一个块级父元素。
假如有三个段落，中间段落浮动，浮动段落会像有一个块级父元素（如div）一样浮动，能防止浮动段落一直向上移动到三个段落共同的父元素顶端。
HTML代码：
<div class=”wrapper”>
<div class=”main”>
<div class=”float left”><p>浮动元素1</p></div>
<p class=”noFloat”>
非浮动元素！。。。。。。 </p>
<p class=”float left”>浮动元素2。。。。。。</p>
<p class=”noFloat”>
非浮动元素！。。。。。。 </p>
</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; }
/* 样式改变 */
p.float { width: auto; height: auto; }
.noFloat { margin: 20px 0; }/* 两个非浮动段落有上下外边距，并会产生合并 */
5、浮动规则5：
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！
