清除浮动

清除浮动有两种情况：第一是清除上级元素的浮动；第二是清除子元素的浮动。

清除上级浮动可以用设置clean:both；就可以了。

清除子元素浮动有以下方法：

1）添加空标签法

     在最后的子元素后面添加一个空标签，设置空标签clean:both;即可

2）clearfix

     clearfix只要是在父元素中添加一个名为clearfix的class，然后所有的浮动元素都在clearfix下。

     然后设置clearfix的样式：

      .clearfix : after{

          content:'';

          visibility:hidden;

          font-size:0;

          dispaly:block;

          height:0;

          clear:both;

          }

          *html .clearfix{zoom:1;}/*for ie6*/

          *:first-child + html .clearfix{zoom:1;}/*for ie7*/

     本质上还是用clear：both；

3）overflow：hidden

     这种方法不需要添加class，直接给父元素设置这个样式属性就可以了。在ie6下还要触发haslayout,如zoom:1;

4）设置inline-block

     inline-block的作用就是应用了这个属性的元素会变成一个行内元素的块容器，也就是内部是个块元素，可以设置行高之类的；跟外面的兄弟元素之间就表现为行内元素，不换行。

     经典用法：.test{display:inline-block;*display:line;*zoom:1;}

     很明显后面两个是针对ie6,ie7的hack，很多人就此认为ie6/7不支持inline-block，但是在msdn开发者社区中已明确指出，ie5.5已经开始支持inline-block了，只不过支持的不完善而已。在ie6中，设置inline元素为inline-block，其表现与现代浏览器设置inline-block很相似；设置block元素为inline-block，其表现就像是block一样，每个元素独占一行。为此，设置display：inline；强制让他不换行，zoom：1；触发hasLayout。

 

     inline-block产生的空隙

在ie6,7,8中，line元素的会产生空隙，block不会产生空隙。

默认情况下，line元素之间是有空隙存在的，所以表明空隙并不是inline-block产生的，对于为什么block不会产生空隙，那是因为hasLayout的问题，产生hasLayout元素之间是相互独立的，不会互相影响，所以就没有那个空隙的存在。

另外不同浏览器产生的空隙是不一样的，为了统一显示，我们可以先先把默认的空隙去掉。怎么去掉呢？

首先必须理解，这些空隙是html产生的空白符，也算是一种字符，字符的话，就可以用font-size来控制大小，去掉空隙，只要让空隙大小为0，也就是设置font-size:0;ie8及以上浏览器支持font-size：0；但是ie6，7设置font-size：0；之后还是有1px 的空隙，这时就需要请出大神word-space（检索或设置对象中的单词之间插入的空隙），设置*word-space:-1px;即可；当然这些设置就是在父元素上设置的，子元素的font-size和word-space还是设置回相应的大小的，不然就看不到内容了。