CSS关于清除浮动的最优方法

发布 2019-07-22 12:21:35 阅读 4783

方法真的很简单,只要为需要清浮动的标签加上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 */