css清除浮动的几种方式

前言：

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。  css浮动

但是使用了 float 后不清除浮动就会出现父级高度塌陷问题

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

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

下面介绍清除浮动的方法

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

在浮动元素后使用一个空元素， 并在CSS中设置 clear 属性即可清理浮动

亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。

<div class="clear"></div>

.clear{
    clear:both;
}

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

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

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

方法二：使用CSS的overflow 属性

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

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

 .container{
            border: 5px  solid#eee;
           overflow: auto; /*  或者  overflow: hidden;   */
        }
            .media {
                width: 100px;
                height: 100px;
                float: left;
                background-color:aquamarine;
            }
            .container p{
                float: left;
            }

   <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;
            }
 
   <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; 。

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

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