<css系列>之css--float总结

一、float的历史

    float的设计初衷是实现文字环绕效果。

如下图，对图片添加float,文字实现环绕效果。

二、float特性

    1、包裹性，表现：收缩、坚挺、隔绝。具有包裹性的属性：display:inline-block/table-cell...;  position:absolute/fixed/;

a、收缩、坚挺：使得内容与本身大小相同，不会有多余的空间；

b、隔绝（BFC）：使用float后标签内部内容与外部无关。改变其外部样式不会对标签内部有影响，改变标签内部也不会对外部有影响，容器就像一个独立的行政单位。

2、破坏性，表现：使父容器塌陷（为了实现文字环绕效果而导致的并非bug）

三、清除父容器塌陷的方法

    底部clear

1、clear：both/(left/right)

both:不允许左右两边有浮动；

left：不允许左边有浮动；

right：不允许右边有浮动；

2、.clearfix:after{}

通常声明：

.clearfix:after{

float:left/right;

position:absolute/fixed;

overflow:hidden/scroll;(IE7+)

display:inline-block/table-cell;(IE8)

width/height/zoom:......;(IE6/7)

}

简化后：

.clearfix:after{

content:"";

display:table;(=display:block;height:0;overflow:hidden;)

clear:both;

}(IE8+)

.clearfix{

*zoom:1;

}(IE6/7)

四、float滥用

    1、浮动block化去空格

按钮添加浮动前

按钮浮动后就没有任何空格&nbsp;了，事实上并非空格去掉了，只是空格移动父容器内所有浮动元素最后

五、浮动与布局

    1、文字环绕变身

    2、流体布局