关于闭合浮动的最佳解决方案

　　浮动布局所带来的最大的问题就是父元素向上塌陷问题。所谓父元素塌陷就是一个容器里的有的两个区块，分别向左和向右浮动之后，其父容器不能包裹住两个区块，而向上塌陷高度变为0，像是父容器不认为其里面有内容了一样。就像这样：

　　这时就需要让父容器闭合浮动来解决父容器塌陷问题。关于闭合浮动，最常见的方法就是在浮动元素末尾添加一个空的标签。例如：<div class="clear"></div>

但是这样做会添加多少无意义的空标签，有违结构与表现的分离，在后期维护将带来很多不必要的麻烦。

　　闭合浮动的方法有很多，无非有两类：

　　其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。

　　其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动。

　　最好的解决办法就是不添加任何标签，能够使父元素自动识别其内部有内容，让父容器可以随着内容的增高而增高。

　　从各个方面比较，after伪元素闭合浮动无疑是相对比较好的解决方案，因为此方法不需要额外创建元素，而且兼容性非常好。下面详细说说该方法。

　　首先要了解下，什么是after伪元素。

　　伪元素：伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。

伪元素有：:first-line，:first-letter，:before，:after

类，伪类，伪元素之间的关系可以总结为：

　　1）类选择器可以看着属性选择器在HTML应用中的一种快捷方式，从逻辑和功能上理解有传统类的含义，其被HTML元素预定义的属性class引用，所以叫着类选择器。

　　2）伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。

　　3）伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

伪类和伪元素都不出现在源文件和文档树中，所以称之为 “伪”

案例应用

:before 伪元素，定义在一个元素的内容之前插入content属性定义的内容与样式

:after伪元素，定义在一个元素的内容之后插入content属性定义的内容与样式

例如:

h1:before{ width:100px; height:50px; background:#F00; display:block; content:"xxx"}
h1:after{ width:100px; height:50px; background:#F00; display:block; content:"xxx"}

<h1>伪类用法例子</h1>

我们可以看到利用after伪元素，可以在不创建的情况下，在h1前后插入伪元素区块。

因为我们可以利用伪元素after闭合浮动无疑是相对比较好的解决方案了，代码如下：

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

.clearfix { *zoom:1; }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。

5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容。

精益求精方案：

相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }