.left { float: left; }
.right { float: right; }
/* 样式改变 */
.noFloat + .noFloat { clear: both; }
9、浮动规则9：
浮动元素必须尽可能朝着所浮动的方向向父元素内边距靠近，且位置越高，靠近的程度越大。
测试源码：
<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>
</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; }
三、下面讲讲清除浮动吧
当一个父的盒子包含浮动的子元素时，为了让父元素完全显示（或者说高度自适应），这时候我们需要清除浮动。下面归纳四种办法实现。
测试源码：
<div class=”father”>
<div class=”child1″><p>浮动元素</p></div>
<div class=”child2″><p>浮动元素
</p></div>
<!–[if IE 6]>
<div class=”clear”></div>
<![endif]–>
</div>
样式：
/* 清除浮动的四种方法 */
/* 方法一 */.father { float: left; }/* 此时父元素高度自适应，但是左右外边距auto失效，父元素靠左对齐 */
/* 方法二 */.father { float: none; overflow: hidden;/* 高度自适应的关键。auto的话ie6会产生滚动条 */ _zoom: 1;/* 兼容IE6 */ }/* 此时父元素高度自适应，且居中对齐不变 */
/* 方法三 */.father:after { content: “.”; clear: both; display: block; height: 0; visibility: hidden; }/* 清除浮动的一种方法，但ie6不兼容 */
<!–[if IE 6]>
<style type=”text/css”>
/* 方法四 */.clear { clear: both; }/* 所有浏览器都适用，为了不增加嵌套才用条件注释兼容ie6 */
</style>
<![endif]–>
由此总结出清除浮动的办法：
给父元素设置浮动；
对父元素使用溢出隐藏的办法；
对父元素使用:after伪对象实现；
空标签法。
