清除浮动的方法

2024年3月6日 109次阅读 来源: 少年版

清除浮动方法

原理：IE8以上和非IE浏览器才支持:after,zoom（IE专有属性）可解决IE6,IE7的浮动问题
优点：浏览器支持性好，不容易出现怪问题，目前腾讯网易等大型网站使用此方法
缺点：代码多
建议：推荐使用，建议定义公共类，减少CSS代码

<style type="text/css">
    .div1{
        background:#000080;
    }
    .div2{
        background:#800080;
        height:100px;
    }
    .left{
        float:left;
        width:20%;
        height:200px;
        background:#dddddd;
    }
    .right{
        float:right;
        width:30%;
        height:200px;
        background:200px;
    }
    
    .clearfloat{
        zoom:1;
     }
     .clearfloat:after{
         display:block;
         clear:both;
         content:"";
         visibility:hidden;
         height:0;
     }
</style>
<body>
    <div class="div1 clearfloat">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="div2">
        div2
    </div>
</body>
    原文作者：少年版
    原文地址: https://segmentfault.com/a/1190000018625301
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞