清除浮动带来的影响
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下更显魔性!