CSS-清除浮动所有方法总结

什么要清除浮动？

一开始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
来源：掘金

动的目的：把多个盒子放在一行上

清除浮动的目的：解决父盒子高度为0的问题

清除浮动，也称闭合浮动

注：本文不兼容IE6

未清除浮动实现情况：

图1

清除后：

图2

原代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

具体方法：

1.额外标签法

在含浮动标签后加兄弟盒子清除浮动

例：

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：添加了许多空div

2.给父盒子overflow:hidden

触发bfc模式（该名词不懂请谷歌/百度，初学者可暂时略过)，直接清除浮动

复制代码

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

overflow: hidden;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：不可与position属性配合使用

3.伪元素法

给父元素定义伪类:after(此处使用的是公共类clearfix）

复制代码

.clearfix:after{

content:"";/*内容为空*/

visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/

display:block;/*变成块级元素*/

height:0;

clear:both;/*清除浮动*/

}

复制代码

具体代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.clearfix:after{

content:"";/*内容为空*/

visibility:hidden;/*将元素隐藏，但是在网页中该占的位置还是占着*/

display:block;/*变成块级元素*/

height:0;

clear:both;/*清除浮动*/

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

缺点：IE8以上和非IE浏览器才支持

4.双伪元素法

给父类加上伪类:before和:after

复制代码

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

复制代码

具体代码：

复制代码

<!DOCTYPE html>

<html>

<head>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

复制代码

附：

对于上述4种方法，优先推荐方法3和4，当然1和2也可，可根据具体情况使用。

还有几种乱七八糟的清除浮动方法，但是缺点多，故不提起.

最后你觉得我们的文章对你有帮助，欢迎关注我，可以私信我：久伴，领取学习资料，在评论下方可以关注我的学习群，你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望久伴可以伴随你从入门到专家。

言

首先我们通过一张图来解释下元素浮动是什么样的状态。

元素浮动情况

上图的html部分代码为：

html代码

css部分代码为：

css代码

通过上面的图片可以看出，当内部的div设置float后，外部的元素的就会受到以下影响：

背景不能显示
边框不能被撑开
margin和padding设置的值不能正确显示

元素浮动的坏处

如果不清除元素浮动的话，浮动层后面的非浮动层内容就有可能被覆盖，造成页面的排版混乱。

例如在上面的例子中再加一个非浮动的div，就会发现该div被前面的三个浮动div覆盖住。

因为浮动，后面的div被覆盖

既然会出现这种情况，我们就应该设法清除掉元素的浮动。

方法1-父级元素设定定高

我们可以给父级元素.outer设置为定高，这样就可以不影响后面的非浮动元素。.outer的样式为：

设置定高

达到的效果为

清楚浮动之后

虽然这种方法可以清楚浮动，但是对父元素设置定高会有很多的限制，如果内层div的高度变化，则需要手动修改外层div的高度，相对来说有点麻烦，因此这种方法并不推荐。

方法2-添加新元素，设置clear:both

在父元素内部的末尾处添加一个新的div，并设置其clear: both;属性。

添加一个新的div

该新增div的css属性为：

新增div的css属性

利用该方法同样可以达到清楚浮动的效果，但是由于会新增DOM元素，这种方法也不推荐。

方法3-父级元素使用overflow:hidden属性

在父级元素上使用overflow:hidden属性，准确来说只要不给overflow属性设置为visible都可以清除元素浮动。

设置overflow: hidden

使用这种方法可以少写很多css样式代码，同时不会新增DOM元素，因此推荐使用这种方式。

方法4-对父元素使用伪元素

通过对父元素使用:after伪元素，同样可以达到清除浮动的效果。

伪元素清楚浮动

以上方法在伪元素中，通过设置clear与overflow属性来实现。方法4在实际的项目中使用的频率最高，因此极大的推荐使用方法4来清除元素浮动。

其他方法

看到网上有的资料介绍，通过设置父元素为浮动，或者设置父元素为absolute定位，这两种方法只是能显示父元素而已，但父元素同样会覆盖到后面的非浮动元素，因此这两种方法严格意义来说并不算清除浮动的方法。

总结

今天这篇文章主要介绍了几种通过CSS来清除元素浮动的方法，你掌握了吗？

在线咨询

上一篇：Excel如何把横向表格变为竖向
下一篇：忽视了网站架构，做不好网站SEO

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS-清除浮动所有方法总结

什么要清除浮动？

如何清除浮动？

1. 额外标签法

1.1 末尾标签法

1.2 内部标签法

2. overflow

3. 伪元素法（最常用）

3.1 使用after伪元素清除浮动

3.2 after伪元素空余字符法

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

三种方法总结

言

元素浮动的坏处

方法1-父级元素设定定高

方法2-添加新元素，设置clear:both

方法3-父级元素使用overflow:hidden属性

方法4-对父元素使用伪元素

其他方法

总结

您的项目需求