【荐】万能清除浮动样式

标签：

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。

这个方法来源于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 */
	display: block;		/* resets display for IE/Win */
}
/* 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框架中同时使用了这两种方法。

项目中常用如下代码：

.clear:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

使用方法如下：

<div class="clear">
	<div class="title">xxx<div>
	<div class="content">yyy</div>
</div>

【荐】万能清除浮动样式

标签：

原文地址：http://www.cnblogs.com/52php/p/5657604.html