清除浮动的方法总结以及 浮动兼容性问题

清浮动方法：
1、给父级也加浮动，margin居中效果失效
.box { width:300px; margin:0 auto; border:10px solid #000; float:left;}
2、给浮动元素父级加display:inline-block; 优点：inline-block本身不脱离文档流
.box { width:300px; margin:0 auto; border:10px solid #000; display:inline-block;}
3、在浮动元素下方加<div class="clear"></div>
.clear { height:0; background:blue; font-size:0; clear:both;}

补充：存在IE6下最小高度兼容性问题，解决方法：font-size:0;但不能完全解决，只能处理到最小2px；

4、在浮动元素下方加<br clear="all" />，all代表both
5、给浮动元素父级加 {zoom:1;}
<div class="box clear">
.clear:after { content:""; display:block; clear:both;}

.clear {zoom:1;}

补充：

（a）zoom 缩放

1、触发IE下haslayout，使元素根据自身的内容计算宽高；

2、Firefox下不支持。

（b）在IE6、7下浮动元素父级有宽度就不用清浮动

haslayout根据元素内容的大小或者父级的大小来重新计算元素的宽度。

6、给浮动元素父级加overflow;
.box { width:300px; margin:0 auto; border:10px solid #000; overflow:hidden; }
.div { width:260px; height:600px; background:red; float:left;}
7、加高 （扩展性不好）

 浮动兼容性问题

IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：

a、IE6

b、浮动

c、横向margin

d、块属性标签（加display:inline;）

IE6下 li部分兼容性问题：

a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)

b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）

vertival-align / img问题

vertical-align 垂直对齐方式

a、加垂直对齐方式的同排元素都要加垂直对齐方式；

b、垂直对齐方式可以解决元素下方间隙问题；

图片下方间隙问题

a、display:block; (改变标签本身特性)

b、overflow:hidden; (必须知道图片高度)

c、vertical-align (暂时最完美的方案)