清除浮动的五种方法

卡卡西最近怎么样

已于 2022-04-27 23:58:18 修改

阅读量2.9k

点赞数 11

分类专栏： JavaScript 零基础入门文章标签： css css3 前端 javascript 开发语言

于 2022-02-22 19:15:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52212950/article/details/123074665

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章

订阅专栏

为什么要清除浮动？因为往往浮动后的子元素因为脱离了标准流，不能自动撑起父元素的高度，所以会对后续布局产生影响，对此清除浮动不如理解为清除浮动产生的影响更为合理。

例如：我们设置了两个盒子如图所示，粉色为父盒子，只有宽度没有高度，蓝色盒子有宽有高，粉色盒子的高由蓝盒子的高度撑开。

但是给蓝色的子盒子设置了左浮动后，脱离了标准流，无法再撑开粉盒子，可以看到粉盒子高度变成了0；

清除浮动有五种方法：

直接设置父元素的高度
额外标签法
单伪元素法
双伪元素法
overflow-hidden

一：直接设置父元素的高度

因为子元素设置了浮动产生的影响就是父元素的高度无法被子元素撑开，所以直接给父元素设置高度是一个非常简便的做法。但是这种方法也有缺点，就是父元素不再是被子元素撑开的，高度有了限制，如果子元素内容较多，则会溢出父元素

 <style>
        .father{
            width: 600px;
            height: 500px;  //直接设置父元素的高度
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

二：额外标签法

额外标签法即在父元素内容末尾添加一个块级元素，然后给该块级元素设置 clear：both; 缺点为会使代码内容添加很多不必要地标签，看起来较为混乱

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

        .clear{  //给添加的块级元素添加属性
            clear: both;
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
        <div class="clear"></div>  //在父元素内容末尾添加一个块级元素，多为div
    </div>
</body>

三：单伪元素法

该方法与添加额外标签相似，只不过是在父元素内容最后天添加了一个伪元素，给其 display 设置为块级元素，并设置必需的 content 属性，最后设置 clear：both; 此方法优点为不会让代码内容乱糟糟，不会出现多余的标签，使用较多。

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

       .father::after{  //给父元素内容末尾添加了伪元素
           content: '';
           display: block;
           clear: both;
       }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

为了避免一些较小众的浏览器也可以兼容此方法，往往会补充一些代码：作用为让网页看不到伪元素

.father::after{
           content: '.';
           display: block;
           clear: both;
           height: 0;
           visibility: hidden;
       }

四：双伪元素法：

此方法多用于清除盒子塌陷问题，另一个文章讲到过，也可以用于清除浮动，但是使用单伪元素更多

 <style>
        .father{
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

       .father::before,  //双伪元素
       .father::after{
           content: '';
           display: table;
       }
       .father::after{
           clear:both;
       }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>

五：overflow-hidden

直接给父元素设置 overflow-hidden 即可，十分方便；

 <style>
        .father{
            overflow: hidden;  //直接给父元素设置 overflow：hidden 即可
            width: 600px;
            background-color: rgb(255, 152, 152);
        }

        .son{
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }
    </style>
</head>
<body>
    <div class='father'>
        <div class="son"></div>
    </div>
</body>