一、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化去空格
按钮添加浮动前
按钮浮动后就没有任何空格 了,事实上并非空格去掉了,只是空格移动父容器内所有浮动元素最后
五、浮动与布局
1、文字环绕变身
2、流体布局