CSS清除浮动常用方法小结(2)
作者:heiniu 来源:阿里妈妈UED 发布时间:2009-07-07 11:59:00
三种清除浮动方法如下:
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
ps:<br clear=”all”/>也可以实现效果,但不清楚使用哪个比较好。呵呵
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{clear:both;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<p class=”clr”> </p>
</div>
2、使用overflow属性。
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
3、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。
<style type=”text/css”>
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>
</style>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
清除浮动后如图所示:
此三种方法各有利弊,使用时应择优选择,比较之下第二种方法更为可取。
猜你喜欢
- 运行以下代码: Dim com As ADODB.Command Dim rst
- 来自 Nine Javascript Gotchas , 以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题,但注意
- 1、图片防盗链在一些大型网站中,比如百度贴吧,该站点的图片采用了防盗链的规则,以至于使用下面代码会发生错误。简单代码:<!DOCTYP
- Microsoft Access 数据库 (.mdb) 文件大小2 G 字节。不
- 在用wordpress这个博客的时候,我很奇怪的发现,最近写的内容排在第一页,而最早写的成了最后页。这显然有悖逻辑,正常的情况应该是最早写的
- Juan Pablo De Gregorio 的 原文很多人都问我如何为一本杂志、一份报纸、一张海报、一份简报或是一份出版物选择
- 代码如下:ADODB.Connection 错误 '800a0e7a' 未找到提供程序。该程序可能未正确安装。 /连接“网站
- 大家知道直接使用ASP是不能够重启服务器的,这时我们需要制作一个组件来实现功能,ASP通过这个组件调用系统API,然后按照不同的重启和关机方
- ---- ORACLE数据库由数据文件,控制文件和联机日志文件三种文件组成。由于磁盘空间的变化,或者基于数据库磁盘I/O性能的调
- asp抓取网页。偶要实现实实更新天气预报。利用了XMLHTTP组件,抓取网页的指定部分。很多小偷查询都是使用这个方法来实现的。需要分件htm
- 经常看到说正则的文章,但说的只是方法,却很少有说以下几个基本概念:1.贪婪:+,*,?,{m,n}等默认是贪婪匹配,即尽可能多匹配,也叫最大
- 某些杀毒软件会把正常的asp文件误认为是asp木马文件,而自动删除,影响正常使用。下面方法可能会有效避免被杀毒软件删除把dim t
- 网上有很多提供在线按钮制作、文字标题制作、Logo制作服务的网站,它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片,下面就快来看
- language.xml 代码如下:<?xml version="1.0" encoding=
- 问题:如何保护自己的ASP源代码不泄露? 答:下载微软的Windows Script Encoder,对ASP的脚本和客户端javascri
- 在服务器上生成动态内容是使用ASP最主要的原因之一,所以我们选择的第一个测试项目是确定把动态内容发送到应答流使用什么方法最好。基本的选择有两
- 下面的代码是从kesion系统扒下的,确实不错,支持utf8格式。代码如下:'===========================
- MySQL支持的两种主要表存储格式MyISAM,InnoDB,上个月做个项目时,先使用了InnoDB,结果速度特别慢,1秒钟只能插入10几条
- 偶第一次发主题, 这个是在一个项目中的做...写的一般般, 有什么bug之类的是在所难免, 望见谅功能说明:1. 即时控制用户输入2. 将输
- 想做个和IBM公司一样的网站LOGO,试了半天也没有做出来,郁闷之下,只好求高手帮助!先在这里谢谢了!方法一1、写上IBM,调节字号颜色2、