清除浮动的方法

清除浮动呢，并不是真的把float清除了，而是清除浮动带来的影响。比如有时候父元素高度不确定，没有设置高度，这个时候父元素的高度就由内容（子元素）撑开，但是如果它里面的子元素设置了float，那么父元素的高度就会消失，也叫高度塌陷。所以清除浮动，是为了解决高度塌陷等问题。

清除浮动的方式：

方式一：在能够给父元素设置高度的情况下（父元素高度固定），可以直接给父元素设置高度。

方式二：在父元素的最后一个子元素后面加一个元素，不过这种增加了DOM，使元素冗余，不建议使用。

<div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div style="clear:both;"></div>
    </div>

方式三：使用单伪元素:after清除浮动，先给父元素一个类名clearfix。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:after{
            content: '';
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix{
            *zoom: 1;/* 触发IE6、IE7 */           
        }
    </style>
</head>
<body>
    <div class="clearfix box">
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

方式四：使用双伪元素清除浮动，依然是先给父元素一个类名clearfix（取其他名字也可以，直接用标签 表示也可以，不过这样规范一点）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:before,.clearfix:after{
            content: '';
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;/* 触发IE6、IE7 */           
        }
    </style>
</head>
<body>
    <div class="clearfix box">
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

方式五：就是能够解决一些莫名其妙的问题的overflow:hidden;但是一般不建议使用，因为可能会影响到其他的东西。

……enen,应该还有其他方式的，不过暂时就只总结出这么多了……再更进吧……

 

posted @ 2020-04-29 20:16  阿凡凡没有提  阅读(187)  评论(0)    收藏  举报