围住浮动元素的三种方法

方法一 ：为父元素应用 overflow：hidden

实际上，overflow：hidden声明的真正用途是防止包含元素被超大内容撑大。应用overflow：hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow：hidden还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。

方法二：同时浮动父元素

第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来

方法三：添加非浮动的清除元素

就是简单地在HTML标记中添加一个子元素，并给它应用clear属性。由于没有默认的样式，不会引入多余的空间，div元素很适合这个目的。

目前最流行的清除浮动的方法，写入一个clearfix的类：

.clearfix:after{ 

                          content: " ";

                          display:block;

                           height:0;

                           visibility:hidden;

                           clear:both;}

.clearfix{

                      * zoom:1}

*zoom：1；是为了出发hasLayout。

关于hasLayout 介绍点击http://baike.baidu.com/link?url=U_3B9202pp9xc357Ge9u7aS_T1WmUYZzVJ8ef4TYxqUjtrIZ-4GGbFT86csIfNHsSfpFQXlLFRlL0JjhPR7dEK

1.display:block使生成的元素以块级元素显示

2.height：0 ；避免生成的元素内容破坏原有的布局的高度。

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

4.content：“”；是使内容部分为空