前言：

CSS 的 Float（浮动），定制开发小程序会使元素向左或向右移动，定制开发小程序其周围的元素也会重新排列。

Float（浮动），定制开发小程序往往是用于图像，定制开发小程序但它在布局时一样非常有用。

定制开发小程序但是使用了float后不清除浮动就会出现父级高度塌陷问题

造成的后果就是父元素高度为0，浮动元素的内容撑不开父元素，这种时候就需要清除浮动


.container{
            border: 5px  solid#eee;
        }
            .media {
                width: 100px;
                height: 100px;
                float: left;
                background-color:aquamarine;
            }
            .container p{
                float: left;
            }
        </style>
    </head>
    <body>
    	<div class="container">
            <div class="media"></div>
            <p>hello</p>
        </div>

下面介绍清除浮动的方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，

并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

clear 属性指定元素两侧不能出现浮动元素

效果图：（可以看到父元素被撑开，说明清除浮动生效）

优点：简单，代码少，浏览器兼容性好。
缺点：不太适合语义化，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

这是我常用的一种方法，在另一篇文章也是使用清除浮动


 .container{
            border: 5px  solid#eee;
           overflow: auto; /*  或者  overflow: hidden;   */
        }
            .media {
                width: 100px;
                height: 100px;
                float: left;
                background-color:aquamarine;
            }
            .container p{
                float: left;
            }
        </style>
    </head>
    <body>
    	<div class="container">
            <div class="media"></div>
            <p>hello</p>
        </div>

使用以上代码也可以达到清除浮动的效果

方法三：使用CSS的::after伪元素

结合 ::after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个::after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。


.container{
                border: 5px  solid#eee;
            }
            .container::after{
            content: "020"; 
            display: block; 
            height: 0; 
            clear: both; 
            /* 表示元素不可见 */
            visibility: hidden;  
            }
            .media {
                width: 100px;
                height: 100px;
                float: left;
                background-color:aquamarine;
            }
            .container p{
                float: left;
            }
        </style>
    </head>
    <body>
    	<div class="container">
            <div class="media"></div>
            <p>hello</p>
        </div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的"020" ( visibility: hidden; )，

并且赋予clear属性来清除浮动。

总结

通过上面的例子，我们可以发现清除浮动的方法可以分成两类：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 ::after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，就像加上 overflow:hidden; 。

本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

转载请注明出处：

定制开发小程序css清除浮动的几种方式

前言：

方法一：使用带clear属性的空元素

方法二：使用CSS的overflow属性

方法三：使用CSS的::after伪元素

总结