方法一 :为父元素应用 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:“”;是使内容部分为空
原文地址:http://blog.csdn.net/u012491775/article/details/45618733