CSS清除浮动的几种有效推荐的方法

最新推荐文章于 2022-07-05 16:46:47 发布

前端小可爱∑(´△｀)

最新推荐文章于 2022-07-05 16:46:47 发布

阅读量92

点赞数

分类专栏： css 文章标签：清除浮动

本文链接：https://blog.csdn.net/weixin_43932098/article/details/91559171

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、父级div定义伪类：after和zoom

<style type="text/css"> 
    
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    
    /*清除浮动代码*/
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfloat{zoom:1}
    </style>
</head>
<body>
            <div class="clearfloat">
                <div class="left">Left</div> 
                <div class="right">Right</div> 
            </div>   
                <div class="div2">
                   div2
                   </div>
</body>
</html>

原理：IE8以上及非IE浏览器才支持 zoom:克解决ie6 7浮动问题
优点：浏览器支持好
disbpay :block; clear:both; content: " "

2.再结尾处添加空div 标签clear：both

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*清除浮动代码*/
   .clearfloat{clear:both}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
   </div>

原理：再结尾处新加一个div ,利用css提高clear：both 清除浮动，让父级div 能自动获取到高度
优点：简单，代码少浏览器支持好，补容易出现怪问题
缺点：多加一个div 页面结构麻烦

3.父级元素定义高度:

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>

原理：父级元素定义高度，就解决了父级div无法自动获取到高度的问题
不推荐使用