4-1 清除浮动

4.清除浮动

　　清除浮动面面观

清除浮动只是简称，更准确的说法是

　　清除浮动带来的影响

清除浮动主要有两大基本方法

　　1.方法一：底部插入clear：both；

　　2.方法二：让父元素BFC（IE8+）或haslayout（IE6/IE7）

方法差异

　　1.clear：就比如索道，保证正常通行，但还可以与外界接触。例如会发生margin重叠。

　　2.BFC/haslayout：形成了一个封闭的结构，保护里面的任何声明都不会对外界产生任何影响，例如浮动也不会发生margin重叠！

clear通常应用形式

　　1.HTML block水平元素底部走起 - <div...></div>

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

这两种方都是有不足的！

　　1.div元素 - 很多裸露的div标签看上去好讨厌！

　　2.after伪元素 - IE6/IE7:你哪位?你妈贵姓？

BFC/haslayouttong通常声明

　　float：left/right

　　position：absalute/fixed

　　overflow：hidden/scroll（IE7+）

　　disaply：inline-block/table-cell（IE8+）

　　width/height/zoom：1/...（IE6/IE7）

BFC方法它是有不足的

　　1.无法"一方通行"

　　2.你我相逢不相识

因此，才有下面的权衡的方法：权衡后的策略

　　IE8以上的浏览器.clearfix:after {content:";display:block;height:0;vaerflow:hidden:clear:both;}　　.clearfix{*zoom:1;}

对于伪元素还有一种更好的方法：可以省略更多的声明，只需要三个

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

滥用的haslayout回使IE6/IE7做出一些出格的事情

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

所有浏览器都应该谨慎使用浮动，但浮动普遍滥用了！

哦！比方说？呵呵呵呵呵....且听下回分解！