CSS属性之float浮动属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float有四个属性分别是：left,right,none,inherit

float:left :表示向左浮动

float：right：表示向右浮动

float：none：表示初始值

float：inherit：规定应该从父元素继承 float 属性的值

可以看一下代码的演示

hmtl

1
2

float：left属性

代码

1 .left{
2 width: 100px;height: 100px;background: plum;float: left;
3 }

演示

 float：right属性

代码

1 .right{
2 width: 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
13

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.