清除浮动

最新推荐文章于 2025-06-02 17:01:47 发布

原创最新推荐文章于 2025-06-02 17:01:47 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html清除浮动

移动web 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 伪元素清除浮动 ，小米是这种方法清除浮动*/
        .clearfix:before,.clearfix:after{
            content: "";
            display: block;
            visibility: hidden;
            overflow: hidden;
            clear: both;
            height: 0px;
        }

        .clearfix {
            zoom: 1;/* 解决IE6 兼容性*/
        }
        .clear { /* 额外标签法清除浮动  京东是这种方式清除浮动*/
            clear: both;
        }

        .xiongda {
            background: pink;
            width: 200px;
            height: 200px;
            float: left;
        }

        .xionger {
            background: purple;
            width: 200px;
            height: 200px;
            float: left;
        }

        .qiang {
            background: indianred;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

    <div class="father clearfix" >
        <div class="xiongda"></div>
        <div class="xionger"></div>

    </div>
    <div class="qiang">

    </div>
</body>
</html>
新浪是这种方法清除浮动
.clearfix:after{
            content: "";
            display: block;
            visibility: hidden;
            overflow: hidden;
            clear: both;
            height: 0px;
        }