java 记录

学习java

万能清除浮动样式

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。
这个方法来源于positioniseverything ,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。

<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;}  /* for IE/Mac */   </style><!-- main stylesheet ends, CC with new stylesheet below... -->   <!--[if IE]> <style type="text/css"> .clearfix { zoom: 1;     /* triggers hasLayout */ <span style="color: #aa0000;">display: block;     /* resets display for IE/Win */</span> }  /* Only IE can see inside the conditional comment and read this CSS rule. Don't ever use a normal HTML comment inside the CC or it will close prematurely. */ </style> <![endif]-->

Update @ 2008.11.12

刚刚看到一篇日志说这个问题,受到了点启发:

.clearfix:after {     content: "020";     display: block;     height: 0;     clear: both; } .clearfix {     zoom: 1; }

这个是优化版的清除浮动的样式,很值得推荐。

另外,我见到了一个无敌的清除浮动的样式,这个是通过独立的代码来清除的。

html body div.clear, html body span.clear {      background: none;      border: 0;      clear: both;      display: block;      float: none;      font-size: 0;      margin: 0;      padding: 0;      overflow: hidden;      visibility: hidden;      width: 0;      height: 0; }

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。

posted on 2011-08-26 14:31 啊飞 阅读(75) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航:
 
<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

导航

统计

常用链接

留言簿(1)

随笔档案

文章分类

文章档案

搜索

最新评论