清除浮动

最新推荐文章于 2024-10-04 06:11:34 发布

洋洋向前冲

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量85

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_45950826/article/details/105492257

版权

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

<style>
    .box{
        border: 1px solid #333;
    }
    .small{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }
    .clearfix::after{ //*伪元素是行内元素 正常浏览器清除浮动方法
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
    }
    .clearfix{ //ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行
        *zoom: 1;
    }
</style>
<body>
    <div class="box clearfix">
        <div class="small">
        </div>
    </div>
</body>
</html>

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

<style>
    .box{
        border: 1px solid #333;
    }
    .small{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }
    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
</style>
<body>
    <div class="box clearfix">
        <div class="small">
        </div>
    </div>
</body>