首 页
网络学院
视频教程
资源下载
HOT
实例教程
图文教程
专题中心
学习社区
繁體中文
当前位置:
首页
>
图文教程
>
网页制作
>
CSS样式表
> css 完美清除浮动的两种解决方案
CSS样式表
CSS的margin边界叠加深度剖析图文演示
CSS中Float(浮动)相关技巧文章
惊现学习CSS应该注意的方法
使用text-align:justify实现两端对齐一例
CSS整体布局声明的一些使用技巧
推荐深入理解css中的position定位和z-index属性
固定表格的高度超过指定高度就隐藏的方法
推荐个Css的filter常用滤波器属性及语句大全
用css滤镜实现的文字描边效果的代码
用css实现的带阴影的表格效果的代码
推荐个不错的表单Input的高级用法11例
flash幻灯片需要先激活ActiveX控件才能使用的又一个办法
DIV+CSS作网页容易犯的错误小结
ul+li及css制作韩国风格菜单代码
div布局的自由伸展三栏式版面的代码
几乎被设计师遗忘了的标签fieldset legend
不用javascript实现带序号的表格隔行换色的效果
用CSS实现基本条状图表效果
用javascript来控制 链接的target 属性的代码
多浏览器css兼容分析小结
No.
«
‹
41
42
43
44
›
»
技术文章搜索
关键字
CSS样式表 中的 css 完美清除浮动的两种解决方案
出处:
互联网
整理:
软晨网(RuanChen.com)
发布:
2009-09-11
浏览: 150 ::
收藏到网摘: n/a
纯css 鼠标移上查看大图的效果
css 透明度的设置兼容所有浏览器
浮动一直是我们编写网页最常用的方法,但是也是最不听话的,一不小心会乱跑,虽然有万能的float闭合div多写一个可以解决掉,但是为了清除浮动而多出来一个空的div实在看着不爽,这里我在网上找到了两种解决的办法,相信很多朋友已经在用了,不过还是列出来,以备后用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>完美清除浮动的两种解决方案</title> <style type="text/css"> ul{ list-style:none; height:auto; margin:0; padding:0; background-color:#436973; } li{ float:left; width:80px; height:120px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5px; } .overflow{ height:auto; _height:200px; min-height:200px; overflow:auto; zoom:1; _overflow:visible; } .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }/*for w3c*/ .clear { zoom:1; }/*for IE*/ </style> </head> <body> <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 class="clear"> <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> </body> </html>
提示:您可以先修改部分代码再运行
纯css 鼠标移上查看大图的效果
css 透明度的设置兼容所有浏览器
评论 (0)
All
登陆
还没注册?