什么要清除浮动？

一开始css的浮动，其本质是用来做一些文字混排效果的，但是后来被我们拿来做布局用，就出现了很多问题。

清除浮动的本质： 为解决父级元素因为子级浮动引起高度为0的问题

我们很多时候不方便给父盒子的高度，因为我们不清除有多少子盒子，有多少内容。经常的做法会让内容撑开父盒子的高度。 但是如果父盒子中有子盒子浮动了之后，就会影响到后面的盒子，因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖，解决这个问题的方法就要清除浮动

原理图

如何清除浮动？

清除浮动其实叫做 闭合浮动 更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。 在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器 { clear : 属性值 ; }
/*属性值为left,清除左侧浮动的影响
  属性值为right,清除右侧浮动的影响
  属性值为both,同时清除左右两侧浮动的影响*/
复制代码

1. 额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用：

<!--写法一：直接用style-->
<div style="clear:both"></div>

<!--写法二：使用clear类-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--写法三：可以使用br等别的块级元素来清除浮动-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 内部标签法

把div放进父盒子里，这样盒子会撑开，一般也不会用。

2. overflow

给父级元素添加overflow样式方法。

这种方法代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是 溢出隐藏 的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上这句话，就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
  }
复制代码

3. 伪元素法（最常用）

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。 父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1触发hasLayout来清除浮动

代表网站：百度、淘宝、网易等

.clearfix:after{
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;      /*content有内容，将元素隐藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7识别 */
}
复制代码

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix，也需要兼容IE6-IE7

在Unicode字符里有一个“零宽度空格”，即U+200B，代替“.”，可以减少代码量，不再使用visibility:hidden

代表网站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
复制代码

3.3 使用before和after双伪元素清除浮动（推荐）

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7

代表网站：小米、腾讯

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
复制代码

三种方法总结

©copyright burning.

最后在这里说一下，目前在职web前端开发，如果你现在在学习web前端，在整个前端入门的学习过程当中，有遇见任何关于学习方法，学习路线，学习效率等方面的问题，或者缺乏基础入门的视频教程，前端面试题，学习手册，开发工具，PDF文档书籍教程，都可以随时关注并私信我：前端 ，系统自动坚持会发送交流圈子，可以来自行获取下载。

作者：顽皮的雪狐七七
链接：https://juejin.cn/post/6901903789197197325
来源：掘金

天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。

下面我就讲3种常用清除浮动的方法，够用了。

1、在浮动元素后面加一个空的div，并为它清除浮动

html代码：

<div class="wrap">   <div class="float">浮动</div>   <div class="clear"></div>   <div class="nofloat">不想被浮动影响</div></div>

css代码：

.wrap{  width:500px;  height:400px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;}

现在虽然加了一个空的div，但是并没有给它清除浮动，所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。

OK，现在给.clear加上清除浮动：

.clear{    clear:both;}

刷新一下效果就出来了：

PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。

2、利用BFC特性清除浮动

html代码：

<div class="wrap">   <div class="float">浮动</div>   <div class="nofloat">不想被浮动影响</div></div>

css代码：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;  overflow:hidden;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;    overflow:hidden;}

效果是这样的：

这里父容器是没有设置固定高度的，本来第一个子元素浮动之后，父元素的高度会塌陷到跟第二个子元素一样高，但由于这里分别给第二个子元素和父元素都设置了overflow:hidden ，所以它们都生成了一个新的BFC区域，根据上文提供的BFC布局规则可以得知：BFC区域不会与float box 重叠；计算BFC高度时浮动元素的高度也参与计算。

所以就得到清除浮动的效果。说得比较绕，但其实清除浮动得根据自己开发中的实际情况合理使用。

3、使用：after伪元素，给浮动元素的父元素清除浮动

html代码：

<div class="wrap">   <div class="float">浮动</div></div>

css代码：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}

此时子元素浮动了，脱离了文档流，所以父元素高度酒塌陷了：

可以看到父元素的边框挤在一起了。

OK，现在给父元素添加一个clearfix类：

<div class="wrap clearfix">   <div class="float">浮动</div></div>

.clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}

现在刷新后的效果就是：

这种方法和BFC清除浮动个人用的比较多，实际开发中，其实这两种就够用了。

好的，清除浮动我也就简单地提到这里！

以上就是CSS清除浮动的几种方法的详细内容。如果有什么错误的话，欢迎留言指正。