方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。
css**网页教学网
ul]list-style:none;height:auto;margin:
0;padding:0;background-color:#436973;li]float:
left;width:80px;height:80px;background-color:
#83b1df;demo]clear:both;border:1px solid #ff00ff;margin-bottom:
5px;overflow]overflow:auto;zoom:1;background-color:
#43ff73;ul]list-style:none;height:auto;margin:
0;padding:0;background-color:#436973;li]float:
left;width:80px;height:80px;background-color:
#83b1df;demo]clear:both;border:1px solid #ff00ff;margin-bottom:
5px;overflow]overflow:auto;zoom:1;background-color:
#43ff73;
html**
其中zoom是为了ie6准备的。
完整的demo
注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对ie起作用。例子可以看这里demo2
这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于ie6及以下版本的ie,可以直接定义高度;对于ie7、ff、op,可定义min-height。
css**
overflow]height:auto;height:200px;min-height:
200px;verflow:auto;zoom:1;overflow:
visible;
闭合浮动元素:针对firefox用overflow:auto。
针对ie用*height:1%或者zoom:1。
个人觉得overflow:auto少用为妙,会有些莫明其妙的问题。
最好用这个方法:
clearfix:after
* end hide from ie-mac */