web前端浮动、清浮动问题

浮动的问题如下一一列举如有考虑不周的欢迎欢迎大家补充：

1.浮动，兼容性问题3px的问题，双边距的问题

在平时工作的过程中，解决3px的问题，一般都是初始化*{margin:0;padding:0px;}但是面试的时候可能面试官的考虑点不是再次，而是为了问你了不了解css hack的问题

在ie7下单独处理的兼容的时候用独有的"*+"  此处只兼容ie7;例如{margin-left:20px;_margin-left:17px;}

在ie6下单独处理的兼容的时候用独有的“_”;例如 .a{ margin-left:20px;_margin-left:17px;}

ie6、ie7都兼容的时候用“+” 例如 .a{ margin-left:20px;+margin-left:17px;}

2、在浮动的同时，有了同一方向上的margin值的时候会产生双边距的问题

例如 .a{ margin-left:20px;float:left;}此时在ie浏览器会产生双边距，解决的方法就是直接添加一个   display：inline    就可以解决 .a{ margin-left:20px;float:left;display：inline}此时就不会有问题了

3、再就是三列布局的情况（左右俩侧都有宽度为100px的一列div，中间的宽度为100%；随着浏览器宽度的变化，自动拉伸）

编写布局的方法有很多种   我写个简单的例子

.div1{ width:100px; height:100%; background:#000000;position: fixed; left:0px; top:0px; z-index:22}
.div2{ width:100%; height:100%;margin:0px 100px 0px 100px; background:red;position: fixed; left:0px; top:0px; right:0px; z-index:1}
.div3{ width:100px; height:100%; background:#000000;position: fixed; right:0px; top:0px; z-index:22}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

4、清除浮动的问题（一般清除浮动有三种写法）：

（1）overflow:hidden;  清除子级浮动

（2）.clear{clear：both} 清除兄弟之间的浮动

（3）clearfix:after{ display:block; content:""; clear:both; }zoom:1;

以上三者区别（1）overflow：hidden;是css样式内部属性；（2）.clear{clear：both}是css样式 （3）clearfix 清除浮动