CSS清除浮动流（利用伪元素清除浮动）

最新推荐文章于 2025-06-02 22:13:22 发布

一只勤劳的二哈

最新推荐文章于 2025-06-02 22:13:22 发布

阅读量819

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/u014262793/article/details/91985740

css 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS中浮动元素及其对布局的影响，详细介绍了如何使用伪元素清除浮动流，确保父级容器正确包裹子元素，避免布局错乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS清除浮动流（利用伪元素清除浮动）

1.注意！

浮动元素------------>浮动流

1，所有产生浮动流的元素，块级元素看不到他们
2，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素

2.利用伪元素清除浮动

(1)要清除浮动,只需要浮动元素父级类名添加clearfix即可

.clearfix::after{
	content = " ";
	clear: both;                  //清除伪元素两边浮动流
	display : block;            //伪元素变为块元素
}

(2)测试

<div class="wrapper">
    <div class="son">这是子元素</div>
</div>

未清除浮动流时的效果

未清除浮动流 CSS布局

 html,body{
            height: 100%;
            width: 100%;
            background-color: #008c8c;
        }
        body {
            margin: 0;
        }
        .wrapper{
            background-color: #f40;
            border: 5px solid #000;
        }
        .son{
            width: 100px;
            height: 100px;
            float: left;
            text-align: center;
            line-height: 100px;
            background-color: #fff;
        }

未清除浮动流块元素浮动父级块元素看不到他们

在这里插入图片描述

利用伪元素清除浮动流之后的效果

.clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

<div class="wrapper clearfix">
        <div class="son">这是子元素</div>
    </div>

在这里插入图片描述