还是提到了一个关于网页制作很古老的问题，浮动的清除。

虽然看过一些资料介绍说能不用浮动就尽量不要用，但对定位不是很熟的我来说，浮动就不能不用了；既然惹上这个麻烦，就得想个办法进行解决。

在论坛里搜索，可以看到有很多这方面的介绍，看过一些总结有一下几种方法：

1、额外增加一个容器，添加清除（clear）的标签以撑大其父容器；

2、使用:after的伪类标签；

3、在父容器设置overflow属性（其值不可为visible）；

4、将父容器也设置浮动的属性，利用浮动元素的一个特征：浮动元素会闭合浮动元素；

5、使用<br clear="all" />；

…

以上大概就是几种常见的方法，我不去深究各自方法的优缺点和兼容性（有兴趣的朋友可以都试试），我只拿出其中两种方法进行比较：clear和:after，看看到底应该怎么用。

先看下面的例子：

1、一行两列，子容器进行浮动布局

提示：你可以先修改部分代码再运行。

 没有进行浮动清除浏览显示如下结果：

IE：IE下显示

FF：FF下显示

那如果我们进行清除改怎么写呢？

这里如果用clear就得加一个空白的div，如

css：

  1. .clear {clear:both;}

xhtml：

  1. <div id="container">container
  2. <div id="content">content</div>
  3. <div id="content2">contenet2</div>
  4. <div class="clear"></div>
  5. </div>

而使用:after，如

css：

  1. .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }
  2. * html>body .clearfix { display:inline-block; width:100%; }
  3. * html .clearfix { height:1%; /* End hide from IE-mac */ }
  4. /* ie7 hack*/
  5. *+html .clearfix { min-height:1%; }

xhtml：

  1. <div id="container" class="clearfix">container
  2. <div id="content">content</div>
  3. <div id="content2">contenet2</div>
  4. </div>

 这里我们可以看出使用:after比较方便；

2、两行两列，第一行两子容器浮动，第二行单独一个子容器

提示：你可以先修改部分代码再运行。

如此写法浏览显示结果如下：

IE：IE下显示

FF：FF下显示

FF下显示正常，而IE下则跟随浮动靠右侧了，换种写法：

  1. <div id="container">container
  2. <div id="content">content</div>
  3. <div id="content2">contenet2</div>
  4. <div id="content3" class="clear">contenet3</div>
  5. </div>

浏览全部显示正常。

值得主意的是，这里使用class="clear"需要遵循一个原则：应该在设置浮动标签容器的同级进行清除。这里正好巧妙的应用了这一点，避免产生一个空白的div。

3、设置浮动的容器里再添加浮动的子容器，可以自动清除浮动。

提示：你可以先修改部分代码再运行。

显示如图：

在经典论坛朋友的帮助下，对.clearfix又提出了一种写法：

  1. .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }
  2. .clearfix{zoom:1;}

个人觉得这样更简单，而原理是相同的，就是对haslayout进行触发。

总结一点就是：方法不是唯一的，灵活应用才是必须的！