css深入理解之folat浮动 4-1 清除浮动

清除浮动带来的影响

float:left

方法1：

脚底插入clear:both;

父元素高度塌陷

方法2:

父元素BFC（IE8+）或haslayout

1.clear 只是提供了通道，会发生跨境重叠的效果               

2.BFC/haslayout   形成封闭的结构，不会发生跨境重叠

clear通常应用形式

1.HTML block水平元素底部 －<div...></div>

2.CSS after伪元素底部生成 －.clearfix:after{}

不足：1.div 很多裸露的div看上去很讨厌

         2.after伪元素－IE6/IE7:不认识

BFC/haslayout 通常声明

float：left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8)
width/height/zoom:1…(IE6/IE7 )

不足

1.无法“一方通行”

2.绝大部分浏览器不认识zoom:1

权衡的策略

.clearfix:after{ content:";display; block; height : 0;overflow: hidden; clear: both;}

.clear:fix{}
.fix{}

更好的方法

.clearfix:after { content:”; display: table; clear: both; }
.clearfix{*zoom:1; }

切勿滥用

 .clearfix应用在包含浮动元素的父级元素上

浮动也会出发haslayout，所以，浮动在IE6/IE7下更显魔性！