通过CSS实例实现清除浮动


在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.   <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7. </div>


显示的结果如下:


容器DIV没有被撑开

大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的方法来解决:
HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7.     <div style="clear:both;"></div>
  8. </div>

    显示的结果如下:


显示正常了

我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div>  。这样,其实就在最后增加了clear的动作。

但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

首先设置这样的CSS:
CSS代码:
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }
然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:
HTML4STRICT代码:
  1. <div style="width:200px;border:1px solid red;" class="clearfix">
  2.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  3.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  4.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  5.     <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  6.    <div  style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  7. </div>
在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
  1. .clearfix:after {
  2.     content: ".";
  3.     display: block;
  4.     height: 0;
  5.     clear: both;
  6.     visibility: hidden;
  7. }
  8. /* Hides from IE-mac \*/
  9. * html .clearfix {height: 1%;}
  10. /* End hide from IE-mac */
因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

测试一下,果然大功告成。



相关阅读:
div+css布局必了解的列表元素ul ol li dl dt dd详解
打开页面就是全屏的方法
在PHP3中实现SESSION的功能(三)
鲍尔默说话没谱 微软公关重申按期停售XP
JavaScript CSS 通用循环滚动条
谈谈网页设计中的字体应用Font Set
批处理方式实现的目录比较工具
详细介绍MySQL日期和时间函数
ExtJS在Android中的显示效果
Javascript动态创建 style 节点
如何解决Linux操作系统中putty乱码问题
一些收集整理非常不错的JS效果代码
HTML5是什么?如何鉴定HTML5产品?
ASP通用分页类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 工程技术部工作总结范文 开心与否 离别的秋天 AdvantagesandDisadvatagesofMobilephones-手机的优点和缺 可爱的”布丁“ 误入包子国 大班科学:有趣的电池 关于火箭的作文250字 小学三年级作文350字:美丽的龙泉寺 暑假第一天_500字 五一劳动节演讲稿——为劳动者喝彩 中秋之夜500字 我理想中的暑假生活 Lake Of Autumn 笑一笑,十年少——观《豚鼠特工队》有感1000字 你有一个梦想,然后呢?没有行动的梦想都叫妄想! 派出所户籍内勤工作总结 说说心情短语好听的QQ空间伤感短语关于爱情的唯美QQ说说 管理专业邮政银行实习报告 最新初中生入团申请书范文通用版 上半年房地产市场总结及下半年展望-半年工作总结_半年工作总结 有爱就有希望作文 大学生法学系暑假实践报告 丰富的三年级下册手抄报内容 描写儿童外貌的句子 爱不是让你充当停留站 又是一片花丛 中班美术:我爱我家 金陵轶事 美好的生日祝福语 竞聘护士长演讲稿 启迪(转载)550字 中国石油自助加油站经理竞聘演讲辞 小学四年级作文400字:友谊号 静待在记忆中 神奇的油菜花作文500字 小学六年级作文450字:记一次有趣的游戏 电业局安全监察部主任在公司春检总结防汛及迎峰度夏暨安全生产视频会议上的讲话 上等媚术 三八妇女节浪漫活动方案 晋剧作文600字 丢掉过去 Shine 我的教师考试之路 日记_和哥哥骑自行车 高中高一作文900字:好事不能忘记 在全县创建文明村镇示范点工作会上的讲话 收获作文100字 花开彼 我想,也许我真的很傻吧

Copyright © 2016 phpStudy |