css清除浮动的最优方法

作者:Ghost 来源:css森林 时间:2008-04-25 22:33:00 

在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代码

<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;
}

标签:浮动,overflow,css
0
投稿

猜你喜欢

  • python logging多进程多线程输出到同一个日志文件的实战案例

    2021-01-08 16:25:17
  • Python实现简单2048小游戏

    2023-08-13 00:19:18
  • python 3.0 模拟用户登录功能并实现三次错误锁定

    2022-06-12 14:11:05
  • 利用Python写个简易版星空大战游戏

    2023-08-26 14:07:42
  • 如何创建一个对索引服务器进行查询的ASP页面?

    2009-11-14 20:54:00
  • PHP面向对象程序设计之类与反射API详解

    2023-11-19 12:44:12
  • django多文件上传,form提交,多对多外键保存的实例

    2023-04-13 04:24:12
  • 使用Spring AOP实现MySQL数据库读写分离案例分析(附demo)

    2024-01-16 04:47:03
  • python实现好看的时钟效果

    2021-02-11 23:44:25
  • python3中eval函数用法使用简介

    2023-08-12 02:28:48
  • 如何使用pyinstaller打包多个和单个python文件详解

    2023-03-30 10:48:26
  • asp如何编写一个最简单的聊天程序?

    2009-11-08 19:04:00
  • thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例

    2024-05-03 15:52:31
  • PyTorch与PyTorch Geometric的安装过程

    2021-12-15 05:00:08
  • Pycharm 操作Django Model的简单运用方法

    2022-05-09 14:07:15
  • SQL中查找某几个字段完全一样的数据

    2024-01-26 12:55:59
  • Python中的 Set 与 dict

    2022-04-09 20:20:33
  • MYSQL5.6.33数据库主从(Master/Slave)同步安装与配置详解(Master-Linux Slave-windows7)

    2024-01-17 00:23:34
  • windows下安装php的memcache模块的方法

    2023-11-20 05:47:38
  • 浅析MySQL数据库授权原则

    2009-12-15 09:21:00
  • asp之家 网络编程 m.aspxhome.com