清浮动的九种方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清浮动的九种方式相关的知识,希望对你有一定的参考价值。

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

以上是关于清浮动的九种方式的主要内容,如果未能解决你的问题,请参考以下文章

CSS清浮动

清浮动的方法

Python-浮动 清浮动

高级布局 浮动 清浮动

清浮动方法小结

CSS清浮动处理(Clear与BFC)