CSS教程:总结清除浮动的方法



作者:Dudo
原文连接:http://www.dudo.org/article.asp?id=239
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是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”跟随变化。
例一:未清除浮动时的布局表现

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
在这个例子中,最开始由于“#inner”的高度小于“#outer”所以不会有问题,但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围,而“#outer”没有发生改变。这就是我们所提到的“清除浮动(闭合浮动元素)”或者是“闭合浮动”问题 解决办法:
1)额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二:使用空div闭合浮动元素

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
P.S. 我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题,不知道是什么原因?!
2)使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用,所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码
/* 这段代码只有IE/Win可以看见 \*/
CSS 规则
/* 结束Hack */
上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理,在windows的IE 6上的清理浮动,可以使用如下代码:
#outer {
display:inline-block;
}
/* Holly Hack Begine \*/
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
例三:使用:after伪类清理浮动

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
另外,似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
如果你对如何使用CSS 2中的伪类不熟悉的话,推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors(1)、(2)、(3)”
3)浮动外部元素,float-in-float
这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
例子
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
例四:float-in-float

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
4)设置overflow为hidden或者auto
把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心,因为它会浏览器的表现。另外,在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动(闭合浮动元素),还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
#outer {
overflow:auto;
width:100%;
}
注意:如果你要在IE5/Mac上使用这种方法清除浮动(闭合浮动元素)的话,你就必须设定overflow的属性为值为hidden。
例五:overflow:hidden

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行] 比较与选择
四种方法中使用哪种最好呢?首先,不推荐使用after伪类,对比其它三种方法,holly招数有点太烦琐,不好掌握,我上面讲到的holly招数中并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以我们又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。
那么其它三种方法其实都可以考虑。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
而对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
float-in-float,也是一个很好的选择,把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。



相关阅读:
Unix/Linux下通过远程桌面连接Windows OS
判“新”函数:得到今天与明天的秒数
php中变量及部分适用方法
Linux系统下管道被接受方关闭的问题
推荐ASP超速入门视频教程
实现数据库事务的方法ExecuteSqlTran()
DISCUZ 论坛管理员密码忘记的解决方法
找到MySQL的优点
SQL 2005中的SSIS与Oracle数据库的迁移性能
Oracle清理和重建临时表空间
掌握盒模型轻松DIV CSS网页布局
IE中img多出5px的空白解决4种方法
php 上一篇,下一篇文章实现代码与原理说明
简单介绍Linux Ubuntu虚拟安装版本
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 小学五年级作文550字:面对成绩 热闹的校运会(转载)作文400字 高富帅靠谱? 小老虎和他的牙医大夫 天堂里可有诗的春天(为纪念天才诗人海子而作) 我学会了“酷”作文400字 点绛唇(己巳重九和苏坚) 我知道,那是你的不明所以 那是一碗白果作文750字 2015大一团支部工作计划 《冰河世纪三》观后感200字 一个心怀诗和远方的人 幼儿园中班健康教案:人体山洞游戏 嫦娥笑了 植树节简短演讲稿 初中初一作文650字:小八哥“黑客” 升旗仪式国旗下演讲《同一时间 向国旗敬礼》 跳绳记 微信销售的沟通技巧,微商提高转化率的妙招 致老鼠作文800字 2015党员学习学党章心得体会 年终公司工作总结 常在河边走,你能不湿鞋? 桂花赋 培训计划方案 俄不是淑女、俄只是一个傻姑娘。 感动的文章故事:蔷薇之恋 新东方教师励志语录 2017毕业祝福 关于乡镇企业发展的社会实践报告 心路,还能走多远 小星星作文1200字 成绩下降反思 高中英语教师面试自我介绍 激烈的运动会作文600字 读后感《海伦·凯勒》 请珍惜缘分 奇怪的旅行家 青春在哪里 我发现爷爷的私房钱 成长的痛与歌作文900字 2014年小学一年级250字军训作文军训小 幼儿园班主任个人工作总结 小学开学第一课班主任讲话稿 事情好多呀 和你在一起幸福真的很容易 疲倦! 关于跨越的作文 王平:我一直处于创业中 重阳节各地风俗习惯

Copyright © 2016 phpStudy |