float定位很常用，我在這裏總結了使用float定位過程中遇到的幾個陷阱，供大家參考。
陷阱一：父元素丟失高度
沒有顯式定義高度的父元素依靠子元素撐起高度，一旦子元素浮動定位，父元素將丟失高度。
解決方法：將父元素的overflow設置爲auto。
demo戳這裏：http://jsbin.com/xuyozabofu/1/edit
陷阱二：與其他同級非浮動元素重疊
元素浮動定位後，它原來佔據的空間會被其他元素補上，與它發生重疊。
解決方法：使用clear：both屬性使它相鄰的元素左右禁止浮動元素。
demo戳這裏：http://jsbin.com/linoluridu/1/edit
陷阱三：文本居中顯示不再是父元素本身的中間位置
如果父元素含有浮動的子元素，那麼使用text-align:center後，文本居中是相對於父元素減去浮動元素後的寬度。
解決辦法：將浮動元素的定位改爲絕對定位。
demo戳這裏：http://jsbin.com/botulayuyo/1/edit