为什么要清除浮动？怎样清除？（float）(2)-木庄网络博客

当前第2页返回上一页

<body>
    <p class="father" style="overflow: hidden;"> 父p  <!-- 父元素添加 overflow: hidden --> 
        <p class="big">子p</p>
        <p class="small">子p</p>
    </p>
    <p class="footer">兄弟p</p>
</body>

也是能实现去除浮动的效果。

优点代码简洁

缺点内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

1	`:after 方式为空元素的升级版，好处是不用单独加标签了**`

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用after伪元素清除浮动</title>
    <style>
    .clearfix:after {  /*正常浏览器 清除浮动*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    }
    .father {
        border: 1px solid red;
        width: 300px;
 
    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <p class="father clearfix">
        <p class="big"></p>
        <p class="small"></p>
    </p>
    <p class="footer"></p>
</body>
</html>

优点符合闭合浮动思想结构语义化正确

缺点由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

4、使用before和after双伪元素清除浮动

使用方法将上面的clearfix样式替换成如下

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

优点代码更简洁

缺点由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

5、总结

1 2	`1、在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式.文档结构更加清晰；` `2、在小模块如ul里推荐使用overflow:hidden;（同时留意可能产生的隐藏溢出元素问题）；`

本文来自PHP中文网，CSS教程栏目，欢迎学习

以上就是为什么要清除浮动？怎样清除？（float）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容