css清除浮动的方法总结与选择
作者:dudo 来源:dudo blog 发布时间:2008-06-06 12:58:00
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。
问题的提出:
最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
我们可以为“#inner”设定一个宽度值(比如说20%),但是由于div是块级元素,即使我们设定了宽度,其后面的内容也只能在下一行中显示,除非我们给它设定一个浮动属性(无论是向左浮动或者向右浮动)。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小,这不会有问题。但是,如果“#inner”的高度超过了“#outer”,那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后,它就会脱离的文本流,无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一:未清除浮动时的布局表现
在这个例子中,最开始由于“#inner”的高度小于“#outer”所以不会有问题,但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围,而“#outer”没有发生改变。这就是我们所提到的“清除浮动(闭合浮动元素)”或者是“闭合浮动”问题
解决办法:
1)额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二:使用空div闭合浮动元素
P.S. 我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题,不知道是什么原因?!
猜你喜欢
- 如何用FILESYSTEMOBJECT组件来做一个站内搜索?看看下面我们提供的例子,主要由searchpage.htm和searchresu
- 问题:希望仅仅允许某个指定IP的计算机连接到SQL Server服务器,但不允许其他的客户端进行连接。解决方法如下:你可以直接在防火墙中做限
- flash param参数和属性下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HT
- [摘要]了解如何充分利用SQL Server 2000的全文搜索功能。本文包含有关实现最大吞吐量和最佳性能的几点提示和技
- 看那个自由落体div有感。这个没落体,画个圆。(ie only)<html><head><style>v
- 一个Javascript 的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。特别适合多表查询的排序。加上<tbod
- asp创建pdf文件代码,详见以下代码:<%Option ExplicitSub CheckXlDriver()&
- oblog 推出了4.0的最新版本,这个不是重点,重点是4.0的版本中附带了xml-rpc支持。oblog的支持代表着大量的国内blog站点
- 阅读上一篇:W3C优质网页小贴士(三)明智地选择 URI没有什么比走到你最喜欢的商店门口,却发现店门紧闭,而且没有看见店面搬迁告示这种事情还
- rs.open sql,conn:如果sql是delete,update,insert则会返
- 简单方法实现网页自动适应任何分辨率任何窗口大小(只适用于IE)<!DOCTYPE html PUBLIC "-//W3C//
- Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。使CSS针对特定的浏览器。简化你对CS
- 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。CSS3带来了一些新的处理颜色
- JavaScript Dom编程 学习书籍选择JavaScript Dom编程学习,很多朋友无疑对如何选择入门的书籍,比较头疼。或许也是他们
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 代码如下:--Begin Index(索引) 分析优化的相关 Sql -- 返回当前数据库所有碎片率大于25%的索引 -- 运行
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 一般写ASP PHP代码的朋友都估计是采用直接操作SQL的吧~ 看以下的代码 <% dim conn,rs&nbs
- 今天开发富媒体广告遇到的问题 用JS控制flash 只在IE平台下有效 费尽周折才找到兼容的解决方案方法如下:重点在于 object的id属
- 背景:pony是公司的首席体验官、首席产品经理。这次在产品峰会上pony将自己平时经验的积累与大家交流,体验较细。这次分享研发管理部,设计中