在css森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且ff、op、ie7都支持，从此可以告别那又长兼容性又差的ff清浮动的方法了。
方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。
css代码
ul {list-style: none;height: auto;margin: 0;p adding: 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代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
其中zoom是为了IE6准备的。
lns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">Overflow hack Demo|www.CSSForest.org <ｓｃｒｉｐｔ src="http://www.google-analytics.com/urchin.js" type="text/javascript"> <ｓｃｒｉｐｔ type="text/javascript">_uacct = "UA-780254-5";urchinTracker();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
@@##@@
Ghost Zhang
Email:lovej1bz@gmail.com
立即学习“tps://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；
QQ:22168741
ORG:WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里 ：
Overflow hack Demo|www.CSSForest.org <ｓｃｒｉｐｔ src="http://www.google-analytics.com/urchin.js" type="text/javascript"> <ｓｃｒｉｐｔ type="text/javascript">_uacct = "UA-780254-5";urchinTracker();overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。
- overflow:auto;
- overflow:auto;
- overflow:auto;
- overflow:auto;
- overflow:auto;
- overflow:auto;
- overflow:hidden;
- overflow:hidden;
- overflow:hidden;
- overflow:hidden;
- overflow:hidden;
- overflow:hidden;
- overflow:visible;
- overflow:visible;
- overflow:visible;
- overflow:visible;
- overflow:visible;
- overflow:visible;
- no overflow
- no overflow
- no overflow
- no overflow
- no overflow
- no overflow
@@##@@
Ghost Zhang
Email:lovej1bz@gmail.com
立即学习“前端免费学习笔记（深入）”；
QQ:22168741
ORG:WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。
css代码：
overflow { height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible; }
