清除浮动的五种方法及优缺点

最新推荐文章于 2023-09-11 17:19:28 发布

常黎凛

最新推荐文章于 2023-09-11 17:19:28 发布

阅读量755

点赞数 7

文章标签： css3 html5

本文链接：https://blog.csdn.net/sinat_56339532/article/details/116164800

版权

我们首先要思考：为什么要清除浮动？

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
</body>
</html>

效果图：

如图所示，四个红色方块并排显示，并没有换行。为什么？

因为父级盒子没有设置高度，而子盒子设置了浮动并脱离了文档流，后面两个红色方块会紧挨着前面的两个红色方块。

再提一个问题：为什么父级盒子不设置高度呢？

我们想想，当父级盒子里面的内容并不是固定的，它是实时更新的内容，我们就不知道父级盒子内究竟有多少个子盒子，高度就无法确定了。

所以我们需要清除浮动，让p标签的内容完全在div里。

清除浮动

方法一：让父级盒子形成BFC，使用overflow：hidden属性。

源代码：

div{
        overflow: hidden;
    }

效果图：

为什么给父盒子加一个overflow：hidden；就能够清除浮动呢？

首先我们要了解BFC。BFC（块级格式化上下文）是页面上一个隔离的独立容器，BFC内的子元素不会影响到其他的元素。BFC可以取消盒子的高度塌陷，也能阻止其他元素被浮动覆盖。

而给父级盒子加上overflow：hidden；就能有效形成BFC，清除父盒子中的子盒子浮动对页面的影响。

优点：简单，方便，可读性高。

缺点：overflow：hidden；有一个特点，离开这个元素所在的区域以后会被隐藏。（将超出的部分隐藏）

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    div{
        overflow: hidden;
        border:1px solid black;
        width:150px;
    }
    p{
        float:left;
        height:50px;
        width:150px;
        background-color: red;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div>
    <p>我就是喜欢你，我就是喜欢你</p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
</body>
</html>

效果图：

如图，虽然p标签会实现自动换行，但是p标签的宽度加上margin-left的长度大于父盒子宽度，部分内容超出了父盒子，而超出的部分又被隐藏掉了，所以少了“就”这个字。

因此这个方法在实际运用中并不理想，一般不会使用。

方法二：额外标签法

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .box1{
        clear:both;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
<div class="box1">   
<div>
</body>
</html>

效果图：

给后面的box1盒子使用clear：both；属性，会将box1左右两边的浮动都清除掉。

优点：简单，方便，易掌握。

缺点：1、如果浮动很多的话，我们会增加很多没有作用的盒子，造成结构的混乱，后期维护起来非常麻烦。

2、margin失效。

源代码：

    .box1{
        clear:both;
    }
    .box2{
        margin-top: 20px;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div class="box2">
    <p></p>
    <p></p>
</div>
<div class="box1">   
<div>
</body>
</html>

效果图：

如图，我们给第二个盒子加了margin-top却失效了。是因为第一个盒子并没有高度，第二个盒子对一个没有高度的盒子使用margin是没有用的。

所以，我们一般也不会用第二种方法。

方法三：隔墙清除法

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .box1{clear:both;}
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div class="box1"></div>
<div>
    <p></p>
    <p></p>
</div>  
</body>
</html>

效果图：

我们在两个盒子中间插入一个盒子，使用clear：both属性清除左右浮动。

优点：简单，方便。

缺点：两个父盒子依然没有高度，margin失效。（但可以给插入的盒子加高度来增加间距）

方法四：使用伪元素

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .clearfix:after{
        content: "";
        height:0;
        line-height:0;
        display:block;
        clear:both;
        visibility:hidden;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
<body>
<div class="clearfix">
    <p></p>
    <p></p>
</div>
<div class="clearfix">
    <p></p>
    <p></p>
</div>  
</body>
</html>

效果图：

我们给两个父盒子加个类clearfix，里面的最后都添加了一个子元素即伪元素，把它转为块级元素自动换行，再使用clear：both；便可以清除浮动。

优点：父盒子有高度，margin有效。符合闭合浮动思想，结构语义化正确。

缺点：不兼容IE低版本浏览器，需要额外写zoom：1；触发hasLayout。代码长，不易掌握。

方法五：使用双伪元素

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
<body>
<div class="clearfix">
    <p></p>
    <p></p>
</div>
<div class="clearfix">
    <p></p>
    <p></p>
</div>  
</body>
</html>

效果图：

我们给两个盒子内前后添加两个伪元素并设置table属性，变成表格后两个伪元素前后自带回车，也可以嵌入内容等，再给after伪元素清除左右浮动即可达到效果。

优点：简单，便捷，没有缺陷。

总结：由于前四种方法多多少少都有些缺陷，所以我们现在一般使用第五种方法。（可以无脑使用）

常黎凛

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
清除浮动的五种方法及优缺点

我们首先要思考：为什么要清除浮动？源代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>清除浮动</title><style> p{ float:left; height:50px; width:50px; background-color: red;
复制链接

扫一扫