CSS属性之float浮动属性

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.