在CSS森林(30247792)群里讨论一个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;
- }
|
引用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;
- overflow:auto;
- zoom:1;
- _overflow:visible;
- }
|
转自鬼仔的Blog,他写的时候用的是最简单,测试后觉得是最优秀的,因为不会有其余的非语义的编码。
本文经已更新后续技术,请关注:http://chinaz.com/Design/Pages/052MIQ2009.html