欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS中清除浮动的几种方法

程序员文章站 2022-05-27 15:40:01
...

一、clear:both;

这种方法有一个问题:margin失效。

二、隔墙法

    <p class="box1">
    </p>
    <p class="cl hl"></p> /*墙*/
        <p class="box2">
    </p>
    cl{
        clear: both;
    }
    .hl{
        height: 16px;
    }
  • 演化出的“内墙法”

    <p>
        <p></p>
        <p></p> /*两个p都浮动,所以p不会被撑出高*/
        <p class="cl"></p> /*在家里建一堵墙就能让儿子给p撑出高*/
    </p>

注意:一般不使用此方法,会增加页面标签。

三、overflow:hidden;

本意就是清除溢出到盒子外面的文字。但是,它能作为偏方来清除浮动。
注意:一般不使用此方法,因为溢出这个元素所在的区域会被隐藏。

四、使用伪元素

.clearfix:after {
        content: '';
        height: 0;
        line-height: 0; /*或 overflow:hidden*/
        display: block;
        visibility: hidden;
        clear: both;
    }
    .clearfix {
        zoom: 1;  /*兼容ie6*/
    }

五、双伪元素标签

页面上不存在的元素可以通过css添加上去,每个元素都有自己的伪元素。

    .clearfix:before,.clearfix:after {
        content: '';
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        zoom: 1;
    }

以上就是CSS中清除浮动的几种方法的详细内容,更多请关注其它相关文章!