HTML代码：
<div class=”wrapper”>
<div class=”main”>
<div class=”float left”><p>浮动元素1
浮动元素的左外边界不超出其包含块的左内边界</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: 50px 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; }
2、浮动规则2：
浮动元素的左（右）外边界必须是源文档中之前出现的左（或右）浮动元素的右（左）外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。
防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！
同样请看源码：
<div class=”wrapper”>
<div class=”main”>
<div class=”float left”><p>浮动元素1
</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。 </p>
</div>
<div class=”float left”><p>浮动元素2
</p></div>
<div class=”noFloat”>
<p>非浮动元素！。。。。。。
</p>
</div>
<div class=”float left”><p>浮动元素3
</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; }
图片较大，没有截图，请单击查看Demo
3、浮动规则3：
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边；右浮动元素的左外边界不会在其左边任何左浮动元素的右边界的左边。
防止第二个浮动元素与第一个浮动元素有重叠区域。
