在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单，只要为需要清浮动的标签加上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代码 <div class="demo"><ul class="overflow"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="demo"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div> 其中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 {content: "."; display: block; height: 0; clear: both; visibility: hidden;}/* Hides from IE-mac */* html .clearfix {height: 1%;}/* End hide from IE-mac */

　　推荐阅读

　　巧用CSS滤镜制作绚丽图片播放效果

CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 　　实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自>>>详细阅读

本文标题：CSS:清除浮动的最优方法

地址：http://www.17bianji.com/kaifa2/CSS/17247.html

 1/2    1