栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS:再论清除浮动的空DIV方法
www.jz123.cn 2011-08-03 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
CSS 使用浮动会造成布局的混乱,通常清除浮动的方法是,利用一个如下样式的空 Div:
.clear{clear:both;}
更为优良的 CSS 代码是:
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{zoom:1;}
这个方法目前已经广泛使用,淘宝、口碑,都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现,完全兼容主流浏览器。
当然,这在通过 CSS 在元素之后追加 "." 并不必要,因为还需要 visibility 来隐藏掉它。通过优化,代码如下:
.clear:after{content:"020";display:block;height:0;clear:both;}.clear{zoom:1;}
其中,020 指在容器后添加空格,这样就避免使用 visibility 隐藏可视性了。
另外,不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器,未免有些突兀。
上一篇:css3阴影属性box-shadow注意事项 下一篇:css3文本阴影属性text-shadow说明