前幾天一朋友在群裡問clear:left的意思，我以為是簡單的清除浮動問題，就讓他百度“清除浮動”，導致中間有點小誤會。後來我按照他寫的DEMO，發現我自己也沒完全理解clear:left和clear:right的意思。特別看了下手冊，和寫了幾個DEMO，經過群裡其他人指導，總結如下，希望對其他人能有點幫助。
clear的值有四個
none：允許兩邊都可以有浮動對象；
both：不允許有浮動對象；
left：不允許左邊有浮動對象；
right：不允許右邊有浮動對象。
老實說，我沒真正理解字面上的意思，因為這幾段話是有歧義的，例如clear:right的解釋是“不允許右邊有浮動對象”，我一直以為是清除自身右方（下方）容器的浮動。但其實不是。下面一個一個DEMO的看，希望你能懂left和right到底是清除哪裡的浮動。
一、普通浮動，無清除浮動，外容器塌陷：
二、左浮動，clear:both清除浮動：
三、右浮動，clear:both清除浮動：
四、左右浮動，clear:both清除浮動：
五、左浮動，清除左浮動，左浮動，未清除浮動的塌陷：
六、右浮動，清除右浮動，左浮動，未清除浮動的塌陷：
（浮動外層容器加了背景色，如果此元素沒有浮動，背景色即會包住他，反之則包不住）
很多人清除浮動喜歡在浮動容器後面加一個空div，div加clear:both，即第二、三、四（因為我加了寬高，一般清除浮動的div都是0，所以看不見），我個人不是很喜歡這種。重點看第五和六，clear什麼，就清除自身前面容器對應的浮動。例如五紅色是左浮動，那麼黃色clear:left就是清除自身前面紅色的左浮動，而清除不了後面藍色的左浮動。六裡紅色是右浮動，那麼黃色clear:right就是清除自身前面紅色的右浮動。至於二、三、四裡的clear:both，左右浮動都可以清除。
總結：加clear的容器，只能清除自身之前的容器浮動，並且清除浮動方向對應。