清除浮动的三种方法！

浮动元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

具体如下：

1. clear:both; 

 顾名思义清除全部样式的意思。主要是用于对多个div的浮动清除，在父元素里最后一个子元素里加上属性从而使父元素不受浮动的影响！

2. overflow:hidden; 

   （1）当父元素里面的子元素用了float这个属性后，其父元素会感知不到里面的子元素，就会存在高度塌陷的问题。这时只需在父元素里加overflow:hidden;即可使父元素被里面的子元素撑开，解决高度塌陷！

  ( 2 ) 从字面上来理解就是超出部分影藏的意思。比如说一个div设置了height和width，加上overflow:hidden;后，就可以保持div的宽度和高度不变。若是div里面添加的内容超出了本身的高和宽，那么超出的部分就会被隐藏掉！这也是需要注意的地方.

3.clearfix:after{                                                                                                              content:" ";//内容可写也可以为空                                                            display:block;//加入的这个元素转换为块级元素                                              height:0;//高度为0；                                                                                      line-height:0;//行高为0；                                                                              font-size:0;//字体大小为0；                                                                          visibility:hidden;//可见度设为隐藏，但仍然占据空间只是看不见                   }

.clearfix{                                                                                                                    *zoom:1;}//针对于IE6的因为它不支持:after伪类，而zoom：1可以让IE6里的元素清除浮动来包裹内部的元素。

.clearfix 的原理就是.clearfix:after这个伪类会在用到.clearfix的元素后面插入一个块元素里面有clear:both;从而清除了浮动的影响。然后在需要清除浮动的元素里加上.clearfix这个类名就可以了。