float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float有四个属性分别是：left,right,none,inherit
float:left :表示向左浮动
float：right：表示向右浮动
float：none：表示初始值
float：inherit：规定应该从父元素继承 float 属性的值
可以看一下代码的演示
hmtl
1 <body> 2 <div class="one"> 3 <div class="left"></div> 4 </div> 5 </body>
float：left属性
代码
1 .left{ 2 100px;height: 100px;background: plum;float: left; 3 }
演示
float：right属性
代码
1 .right{ 2 100px;height: 100px;background: plum;float: right; 3 }
演示
float还可以用来实现横向两列布局，三列布局，水平菜单等，这里就不列举了。
当你想要清除浮动时，可以在父元素上加入以下几种方法
1.overflow:hidden(不推荐)
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2.使用after伪元素清除浮动（推荐使用）
1 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ 2 content: ""; 3 display: block; 4 height: 0; 5 clear:both; 6 visibility: hidden; 7 } 8 .clearfix{ 9 *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ 10 } 11 12 <body> 13 <div class="fahter clearfix"> 14 <div class="big">big</div> 15 <div class="small">small</div> 16 <!--<div class="clear">额外标签法</div>--> 17 </div> 18 <div class="footer"></div> 19 </body>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.