清浮动的九种方式

Posted 2020-09-29

1、加高

　　给父级加高

       问题：扩展性不好

 2、父级浮动

 　　 让父级也浮动

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

3、inline-block 清浮动方法：

　　  给父级加display: inline-block;

         问题：margin左右自动失效；

4、空标签清浮动

　　 在浮动元素下加

　　<div class="clear"></div>        

       .clear{height: 0px;font-size: 0px;clear: both;}

        问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

5、br清浮动

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

        问题：不符合工作中：结构、样式、行为，三者分离的要求。

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

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

        .clear{zoom:1;}

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

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

　　  zoom 缩放

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

              b、FirFox 不支持；

7.overflow:hidden 清浮动方法；

　　　给父级加overflow:hidden 

          问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

          overflow:  scroll | auto | hidden；

          overflow:hidden;溢出隐藏（裁刀！）

8.position:absolute 清浮动方法

 　　给父级加position:absolute

9.position:fixed 清浮动方法

　　 给父级加position:fixed