CSS清除浮动的本质以及清楚浮动的几种办法

最新推荐文章于 2022-04-20 15:06:55 发布

ChuanYang Chen

最新推荐文章于 2022-04-20 15:06:55 发布

阅读量105

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45525653/article/details/120629017

版权

本文深入探讨了清除浮动的本质，即修复浮动元素对布局的影响。介绍了三种常见清除浮动的方法：额外标签法、父级添加Overflow和使用伪元素。额外标签法简单直观但可能增加无意义标签；通过设置父元素的Overflow为hidden可以简洁地解决问题，但可能隐藏溢出内容；:after伪元素和双伪元素方法则更为优雅，尤其适用于现代浏览器，但对旧版IE支持不佳。

摘要由CSDN通过智能技术生成

CSS清除浮动的本质以及清楚浮动的几种办法

清除浮动的本质

清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的几种方法

额外标签法「隔墙法」

额外标签法🏷️会在浮动元素末尾添加一个🈳️的标签

优点：通俗易懂，书写方便✍️
缺点：添加许多无意义标签，结构性比较差
注意 ⚠️：新的空标签必须是一个块级元素

<style>
    .child{
        width: 50px;
        height: 50px;
        border: blue 1px solid;
        float: left;
    }
    .box{
        border: black 1px solid;
    }
    .clear{
        clear: both;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
        <div class="child"></div>
        <div class="clear"></div>
    </div>
</body>

在这里插入图片描述

父级添加Overflow

可以给父级元素添加Overflow属性，将属性值设置为hidden，auto或scroll

优点：代码简介
缺点：无法显示溢出部分

<style>
    .child{
        width: 50px;
        height: 50px;
        border: blue 1px solid;
        float: left;
    }
    .box{
        border: black 1px solid;
        overflow: hidden;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

:after伪元素清除浮动

额外标签法的升级版，很多大厂都在用这种清除浮动的方式，但对IE不是很友好（基于现在IE已经淘汰了，所以不再做IE适配的讨论）
:after伪元素清除浮动相对于额外标签法的优点是没有多余的标签🏷️

<style>
    .child{
        width: 50px;
        height: 50px;
        border: blue 1px solid;
        float: left;
    }
    .box{
        border: black 1px solid;
        overflow: hidden;
    }
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>
<body>
    <div class="box clearfix">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

双伪元素

同样是作用在父元素上面的👆
是:after伪元素清除浮动的升级版，同时也是大厂常用的方式，同样有IE兼容问题，但IE已死不做讨论。

<style>
    .child{
        width: 50px;
        height: 50px;
        border: blue 1px solid;
        float: left;
    }
    .box{
        border: black 1px solid;
        overflow: hidden;
    }
    .clearfix::after,.clearfix::before{
        display: table;
        content: "";

    }
    .clearfix::after{
        clear: both;
    }
</style>
<body>
    <div class="box clearfix">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>