CSS浮動標準修復top塌陷和清除浮動及IE兼容標準格式

浮動特性

一、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
二、浮動的元素會向左或向右浮動，碰到父元素邊界、其餘元素才停下來
三、相鄰浮動的塊元素能夠並在一行，超出父級寬度就換行
四、浮動讓行內元素或塊元素自動轉化爲行內塊元素(此時不會有行內塊元素間隙問題)
五、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，造成文字饒圖的效果
六、父元素若是沒有設置尺寸(通常是高度不設置)，父元素內總體浮動的元素沒法撐開父元素，父元素須要清除浮動
七、浮動元素之間沒有垂直margin的合併

浮動的缺點及坑

一、top塌陷
二、li子元素浮動屬性沒法對ul的
三、IE對:after或者:befroe兼容

clearfix修復代碼標準格式

/*top塌陷*/
			.clearfix:after,.clearfix:before{
				content: "";
				display: table;
			}
			/*清除浮動*/
			.clearfix:after{
				clear: both;
			}
			/*IE兼容*/
			.clearfix{
				zoom: 1;
			}