<<  iframe背景透明 | 首 页 | 妇女节快乐！  >>
2007-03-01

[原]css技巧：清除浮动- [CSS]

当我们自豪地甩开table布局方式时，css+xhtml的布局也常常令我们苦恼不已。经典的3像素问题，莫名其妙的高度没有自适应等等，都是源于css里的float！

我聪明可爱的同行们一般都是在容纳了浮动对象的容器内最后放一个空的div，给其设置属性为clear:both。这样一来确实解决了不少讨厌的浮动问题，但是想想看，我们做标准是为了什么？一个空的div，浪费代码不说，还没有任何语义！

几个月前我终于找到一套纯css方法，不需要在xhtml代码里添加任何无用代码。废话不多说，先把代码帖在这里：

.box{display:inline-block}/*针对父层容器进行定义就行了*/
.box:after{display:block;clear:both;content:".";visibility:hidden}

至于这么写的原理嘛，我也讲不太清楚，呵呵。其实和在xhtml里加那个空的clear属性div是一个意思，只不过这样是利用:after把清除浮动的东西写到了css里。这么做了之后我们的页面代码是不是变得更干净了呢？至于css，虽然多了些看似繁杂的定义，但是我们可以把同样需要清除浮动的所有class名用组选择符的方法写在一起不就OK了:)

PS:本人近一年比较懒，疏于blog经营，流失了很多博友，深表遗憾！其实我很喜欢把自己知道的技巧都拿出来跟大家分享，只要看到文章的朋友多顶几下，我就有了无穷动力了，哈哈哈哈～





Tag: CSS WEB标准 网页制作技术

评论

  • 博主文章虽不长，但都是自己写的，难能可贵，支持原创 s4m7r6lx

    qq空间 (http://www.52qq.gd.cn) 发表于 2008-03-26 18:05:58

  • 写得不错，楼主继续努力，全力打造我们最大的博客大巴 h4d7w6im

    注册香港公司 (http://www.richung.cn) 发表于 2008-03-26 13:30:47

  • 正准备总结一下清除浮动的一些方法，博主这种方法不错，但是似乎有一个bug，我测试的时候如果不在:after中为其定义height:0;box对象会比实际高出一部分～···

    wondger (http://www.wondger.com) 发表于 2007-11-19 12:03:25

  • Hello! Good Site! Thanks you! ezsxmylrglzt

    wgyizpyoza (http://wgyizpyoza.com) 发表于 2007-10-09 11:19:50

  • 精典的清除浮动。。。

    xin (http://杭州文三路) 发表于 2007-10-01 01:31:15

  • HOHO <code>没起作用..

    镜 (ximicc.com) 发表于 2007-06-29 21:57:00

  • Realazy：

    http://realazy.org/blog/2006/11/07/ie7-are-you-ready/



    一次只能贴一个地址啊~

    小甲 (www.5qer.com) 发表于 2007-04-03 11:27:13

  • 两篇文章：

    老九：

    http://old9.blogsome.com/2006/04/21/enclosing-floats/



    看完就知道为什么了……

    小甲 (www.5qer.com) 发表于 2007-04-03 11:26:34

  • 我来帮老大顶~哈哈

    adam (www.79bc.cn) 发表于 2007-03-08 10:24:40

  • 顶XD

    iZ (http://) 发表于 2007-03-01 17:49:24

发表评论

 姓名：
 E-mail：
 地址：
   


 
nicle @ 15:36:28 | 引用 0 | 编辑