清除浮动的方法有很多种 clearfix无疑是一种看上去最语意化的方法 下面这段代码来自豆瓣 不过貌似不多数网站都是相同的

/* clear fix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
.clearfix { zoom: 1; display: inline-block; _height: 1px }
*html .clearfix { height: 1% }
*+html .clearfix { height: 1% }
.clearfix { display: block }

三种浏览器都是不同的版本 每次都要查一次 粘帖复制一次 直接写在这里了 来自阮一峰的blog

//圆角
    .box_round {

    　　-moz-border-radius: 30px; /* FF1+ */

    　　-webkit-border-radius: 30px; /* Saf3+, Chrome */

    　　border-radius: 30px; /* Opera 10.5, IE 9 */

    }
//盒状阴影（Box Shadow）
    .box_shadow {

    　　-moz-box-shadow: 3px 3px 4px #ffffff; /* FF3.5+ */

    　　-webkit-box-shadow: 3px 3px 4px #ffffff; /* Saf3.0+, Chrome */

    　　box-shadow: 3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */

    　　filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff'); /* IE6,IE7 */

    　　-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color='#ffffff')"; /* IE8 */
    }
//线性渐变（Gradient）
    .box_gradient {

    　　background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

    　　background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */

    　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0'); /* IE6,IE7 */

    　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999',GradientType='0')"; /* IE8 */

    }
//透明（opacity）
    .box_rgba {

    　　background-color: #B4B490;

    　　background:transparent;

    　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */

    　　-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */

    　　zoom: 1;

    　　background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */

    }

css hack

1.Conditional comments as a CSS hack 在html加入条件注释 实现css hack

语法

2.In-css hack 在css文件中 是选择器的bug 这些都是有效的css w3c验证的时候不会报错

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Internet Explorer 6 and below had a problem with the !important

3 Unrecommended hacks
If you are going to use hacks, the above techniques are the recommended choices. However, it’s interesting to point out the following unrecommended hacks. Some of them rely on invalid CSS or are more clumsy than the above alternatives.

_property: value and -property: value
apply the property value in IE 6 and below. Warning: this uses invalid CSS.

*property: value applies the property value in IE 7 and below.
It may or may not work in future versions. Warning: this uses invalid CSS.

Eric Meyer是css的大师 我看过他的一本Eric Meyer 谈CSS（卷1） 写的很好 这是他写的css reset 以后就用他的版本了

好像blueprint框架也用的这个reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The folks at Yahoo! have also developed their own browser reset styles. As with other reset styles, the Yahoo! Reset CSS eliminates inconsistently applied browser styling for many key (X)HTML elements.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img {
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}