清除浮动（下）

今天的文章我们继续上一篇文章的主题，和大家谈一下我对于浮动清除问题上的一些理解。今天也不多说了，直接接上上篇文章的内容。

清除浮动的常用方式

（1标题内容和其他内容请见上一篇文章）

2，设置BFC（块级格式化上下文）来清除浮动

我这个分类方式可能比较少见，但我觉得这样说可以让大家更好的理解清除浮动的这一类方法的实现原理。不知道大家还记不记得BFC会产生一些什么效果（如果不记得了我推荐你去看看我前面的文章，也很近，没差几天）？不一定要记全，这里我们主要需要其中的一个性质：能够包含浮动元素。

大家回忆一下为什么我们需要清除浮动呢？因为正常的元素在一些情况下不能包含浮动，会和我们设想的布局存在差异，那BFC能够包含浮动元素自然就可以用来清除浮动元素咯。那接下来我们思考下具体要怎么去做呢？很简单，就是生产BFC的那些方法啊，这里我给大家回忆下：

块级元素的非块级容器，典型的就是display: inline-block
overflow不为visible的块级盒子
绝对定位或浮动元素

如果大家看过别的相关文章应该就会发现很多清除浮动的方法也就在上面的三个内容之中了。

3，通过clear:both来实现

这个方法可以说是官方给我们准备的方法了。在CSS中有一个clear属性，就是专门清除浮动的，它决定了元素周围不允许浮动的位置，主要为三个值：left，right，both。即对应左，右，两边。我们通常可以直接通过both直接清除浮动，但具体操作上还有一些细节，我这里就主要给大家介绍两种实现方法：

1）添加空的<div>，并为其添加clear:both

具体实现请看下面的样例代码：

<style>
.parent{
  border: 1px solid #000;
}

.child{
  width: 100px;
  height: 100px;
  float: left;
  border: 1px solid #000;
}

.clear{
  clear: both;
}
</style>

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

看了这个大家应该懂了吧，这种方法属于过去使用最多的方法，其特色就是简单直接，但缺点也同样明显，这一方法在HTML中添加了一个无意义的<div>内容，这是会破坏结构的。虽然其实大多数时候我也不知道这样做的问题会导致什么，但总归是不太好的吗=。=，现在已经不推荐使用这种方法了。

2）通过伪类:after来清除浮动

这个方法是现在最推荐的方法，整体上来说就现阶段的技术，应该是最好的方法，和上面相同，我们先上例子：

<style>
.parent{
  border: 1px solid #000;
}

.child{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: left;
}

.clearfloat:after{
  display: block;
  clear: both;
  visibility: hidden;
  content: "";
  height: 0;
}
.clearfloat{
  zoom: 1;
}
</style>

<div class="parent clearfloat">
  <div class="child"></div>
  <div class="child"></div>
</div>

这个方法又是怎么个实现原理呢？我先和大家讲一下:after这个伪类的效果吧，这个伪类的效果是在元素后添加一个元素，这个元素的属性也是单独设置了，其中有个content对应的是元素内填写的内容，别的都是常见的内容。知道这个内容再结合上面的例子大家应该就懂了吧，其实这个方法也相当于上面的方法，添加了一个clear:both的空元素，但这个方法是直接加在原有元素上，不会破坏结构，至于zoom: 1则是专门为了处理兼容性问题，只有IE8以上和非IE浏览器才支持:after伪类，但zoom: 1可以解决IE8一下浏览器的浮动问题。

写到这里呢，今天的文章就结束了，关于清除浮动问题我个人的理解也就是这个样子，希望对大家有帮助吧。

清除浮动（下）