浅谈CSS清除浮动（ClearFix）的方法

在很多开发过程中，常常会用到浮动流来弥补标准流布局所难以实现或者不合适的缺陷。但如果一味地使用浮动流进行布局，其产生的副作用足够大之时，就难免会遇到一些“尴尬”和棘手的问题。

什么是清除浮动？

在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left或right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。
为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。

为什么要清除浮动？

可以很简洁地说，清除浮动就是为了清除浮动元素产生的不良影响。

浮动带来的负面影响

1、背景无法显示

由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，CSS背景无法显示。

2、边框无法撑开

如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin、padding 设置值无法正确显示

由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

举些例子：

A. 块状元素钻到浮动元素底面，被其所覆盖：

这里写图片描述

B. 浮动元素的父元素坍缩：

这里写图片描述

上面说的不够详细，这里再举个实际的例子：

有2个div，各个div里都有3个写有文字的p标签，完成初始化配置后是这个样子的：

代码：

<style>
.box1{
    background-color:green;
}
.box2{
    background-color:yellow;
}
.box1>p{
    background-color:red;
}
.box2>p{
    background-color:blue;
}
</style>
<div class="box1"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
</div> 
<div class="box2"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
</div>

效果如图：

这里写图片描述

还没完，这只是开始。现在，要求将2个div里的p都左浮动显示。

1
2
3

p{
    float: left;
}

本以为应是这样：

结果却是这样的：

Whhhhat the … ?

像产生这种难看的效果全因布局没做对，之前使用了左浮动float:left产生的负面影响没有消除。
还好，我们有以下几种不错的方法可以解决这个问题。

清除浮动的方法

给父元素设置一定的高度height
1
2
3
4
5
6
7
<style>
.box1{
height: 100px;
}
.box2{
height: 100px;
}
效果如下：

将背景颜色除去，效果就正如我们想要的那样。
但是，这种方法太过僵硬，一般在开发过程中不建议自设高度。
使用CSS的 clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear可能的值：

left      在左侧不允许浮动元素。

right    在右侧不允许浮动元素。

both    在左右两侧均不允许浮动元素。

none    默认值。允许浮动元素出现在两侧。

inherit   规定应该从父元素继承 clear 属性的值。

使用“隔墙法”

所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。

隔墙法又分为两种：

A. 外墙法：在元素与元素之间新增一个块元素，并设置clear属性。

<style>
    .clearfix{
        clear: both;
    }
</style>
<div class="box1"> ... </div>
<div class="clearfix"> </div>
<div class="box2"> ... </div>

然而需要注意的是，位于新增的块元素（“墙”）前面的元素无法使用margin-bottom，而后面的元素却可使用margin-top。这里不作演示，留给大家自己尝试吧！

B. 内墙法：在父元素里的所有子元素之后新增一个块元素（即父元素的last-child），并设置clear属性。

<style>
   .clearfix{
      clear: both;
   }
</style>
<div class="box1"> 
    <p>Hello world!</p>
    <p>Hello world!</p>
    <p>Hello world!</p>
    <div class="clearfix"></div>
</div> 
<div class="box2"> ... </div>

幸运的是，这个方法可以使位于新增的块元素（“墙”）前面的元素使用margin-bottom，后面的元素也可使用margin-top。这里也不作演示，留给大家自己尝试吧！

虽然隔墙法可以很好的实现清除浮动，但也带来不好的一点：增加了额外多余的标签。

使用 :after伪元素

对使用了浮动流的元素进行:after配置，常见的典型的代码段如下：

<style>
.box1{ 
    ...
}
.box1:after{
    content: "";             /*内容设置为空！！！*/
    display: block;        /*显示为块级元素！！！*/
    height: 0;
    visibility: hidden;  
    clear: both;         /*清除浮动！！！*/
}
</style>

p.s. 以上注释部分的代码为必须，一般情况下，通过3行代码 content: ""; display: block; clear: both; 便可实现。

效果也正如上面的内墙法一样：

需要注意的是，如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性以触发haslayout。

<style>
.box1:after{
    ...
    zoom: 1;
}
</style>

这个方法所能体现的优点：1. 避免了多余标签的使用； 2. 可以兼容大部分浏览器。

使用 overflow 属性

通过给浮动元素添加 overflow 属性并设置为hidden或者auto即可清除浮动。
1
2
3
4
5
6
<style>
.box1{
...
overflow: hidden;
}
</style>
Or
1
2
3
4
5
6
<style>
.box1{
...
overflow: auto;
}
</style>
效果也如上面一样：

另外，在 IE6 中还需要触发 hasLayout ，需要为父元素设置容器宽高或添加zoom:1。
给父元素设置display: table

虽然也可以解决浮动问题，但缺点亦随之而来：盒模型属性已经改变，由此产生一系列烦人的问题，得不偿失，不推荐使用。

扩展 & 延伸

以上几种方法并没有按照比较严谨的技术规范进行分类。只是为了方便大家使用，根据方法的优越度和优先度来阐述，这样大可便于在不同的场合采用比较合适的方法去解决实际的问题。因此没有多做复杂的说明。

其实，所谓的清除浮动的方法可以分为两类：

清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。其中涉及的原理有：
hasLayout 和 Block formatting contexts 。

详情请点击这里进行跳转查阅。

文章作者: Geolage Wu

文章链接: https://geolage.github.io/blog/2017/09/28/浅谈CSS清除浮动（ClearFix）的方法/

CSS clearfix 清除浮动