CSS清楚浮动常用方法

　　CSS开发过程中清楚浮动是难以避免要使用的，今天牺牲午觉的时间整理一下吧！

---

 

一、给父级加高度：这样肯定不存在父级坍塌的问题了；

问题：扩展性不好，如果要自适应高度就悲催了。

 

二、让父级浮动：父级和子级都浮动就不存在这个问题了；

问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！），

再说了所有的父级都能浮动吗，也有扩展性的问题。

 

三、给父级加display：inline-block 清浮动方法：

  问题：margin左右自动失效；

 

四、空标签清浮动

　　在浮动元素下加<div class="clear"></div>
.clear{ height:0px;font-size:0;clear:both;}

　　在浮动元素下加<br clear="all"/>

　　问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差），不符合工作中：结构、样式、行为，三者分离的要求。

 

五、after伪类 清浮动方法（现在主流方法）

.clear:after{
　　content:'';
　　display:block;
　　clear:both;
}

.clear{
　　zoom:1;
}

     after伪类： 元素内部末尾添加内容；

      :after{content"添加的内容";} IE6，7下不兼容

     zoom 缩放

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

      b、FF 不支持；

---