CSS浮动-清除浮动

『清除浮动的目的』是为了解决父元素因子元素浮动导致内部高度为0的问题
『清除浮动的方法』主流有4种方法，分别为额外标签法、溢出隐藏法、单伪元素法、双伪元素法，代码如下

额外标签法

『优点』通俗易懂，书写方便
『缺点』无意义标签居多，结构化较差

/* 为最后一个额外浮动元素添加clearfix类名 */
.clearfix {
	clear: both;
}

溢出隐藏法

『优点』代码简洁
『缺点』内容增多时，易造成不自动换行，导致内容被隐藏，从而无法显示溢出元素的问题

/* 为浮动元素的父元素添加clearfix类名 */
.clearfix {
	overflow: hidden|auto|scroll;
}

单伪元素法

『优点』符合闭合浮动思想，结构化较强
『缺点』IE6-7不支持:after，使用zoom:1触发hasLayout

/* 为浮动元素的父元素添加clearfix类名 */
.clearfix:after {
	content: "";    /* Firefox7.0前的版本会生成空格，应写为content: "."; */
	display: block;
 	height: 0;
	clear: both;
	visibility: hidden;
}
/* 不考虑IE6-7可省略下面的兼容代码 */
.clearfix {
	*zoom: 1;    /* IE6-7专有的清除浮动的方式(其他浏览器会忽略) */
}

双伪元素法

『优点』代码更简洁
『缺点』IE6-7不支持:after，使用zoom:1触发hasLayout

/* 为浮动元素的父元素添加clearfix类名 */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;    /* 此句发出BFC(BFC可清除浮动，后面详解) */
}
.clearfix:after {
	clear: both;
}
/* 不考虑IE6-7可省略下面的兼容代码 */
.clearfix {
	*zoom: 1;    /* IE6-7专有的清除浮动的方式(其他浏览器会忽略) */
}