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


猜你喜欢
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