哈哈哈哈哈哈哈，我懂了原理啦
clear清除的是浮動的高度（就是跑到位置），而不影響浮動的方向.
原理如下：
clear清除的是元素本身，但不會影響方向。通俗點說就是clear清除的是浮動產生的文件流。舉個例子，就是有2個div,當第二個div產生浮動時，第二個div會脫離第二行，到達第一行。當你清除它的時候，清除的就是這個跑的距離。
浮動的特性導致了與想象中的不一樣。這特性指脫離文件流和上前補位。只要前面乙個元素浮動了，空出了位置，後面乙個元素就會跟著往前跑。直到把位置占領了為止。這裡比較特殊的一點是，浮動有兩個方向，左浮動和右浮動。而脫離文件流的div元素卻並不怎麼管這件事，他們的邏輯是只要有位置我就可以占領，直到沒有位置為止。舉個例子，有3個div,第乙個div左浮動，此時，第二個div和第三個div會同時往上跑，第二個div就看不見了。但當第二個div也產生了浮動還是向右浮動時，第二個div就會在右邊，能被看見，這時第三個div在第乙個div下面看不見。當第三個div也向左浮動時，第三個div就會在第乙個div的後面，被看見，此時他們成為一行。假設此頁面現在一行一共只能容納5個div，那麼在給他乙個向左浮動的div,這一行能放下，在給乙個div則放不下了，此時這個div會在第乙個div下面重新進行順序排列。
clear
情況如下
兩個div
1.**如下
效果圖如下
**如下
效果如下
**如下
原理如下：第乙個深紫色div清除浮動，消除了脫離的文件流，但第乙個文件流比較特殊，無法肉眼看見。因為清除並不影響它的方向，div的方向由浮動決定，所以此div還是在左。第二個div所佔據的位置本來就是第一div剩下來的，現在第乙個div跑回來了，第二個div也只能讓位，反正無論如何，第二個div都活著第乙個div的陰影下，向左浮動則救助了它，讓他活成了自已
**如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
效果圖如下
**如下
效果圖如下
考慮到第乙個div比較特殊，於是那第二個和第三個再次實驗進行對比
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下
**如下
效果圖如下：
**如下
效果圖如下
我希望的效果是清除第4個div的浮動，讓他位於前面三個div的下方。
clear:both和clear:left都實現了這個效果。
但是clear:right沒有實現這個效果。
個人猜測是因為第四個元素的浮動方向是左側，所以清除右側的浮動無效，而clerr:both是兩個方向的浮動都清除，所以才有效。
CSS 清除浮動Clear
還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用 float left 打擊了塊狀元素的 霸道 即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的css 中加入了 float left 後，紅色方塊終於允許藍色方塊和它處於同一行。如圖 我們換一種方法表達上面...
clear清除浮動標籤
1 清除浮動clear clear right 清除右浮動造成的影響 clear left 清除左浮動造成的影響 clear both 清除兩邊浮動造成的影響 注意 在浮動後面的盒子上設定清除樣式 即那個受影響就在誰上面設定 2 overflow 超出部分如何處理 overflow hidden 超...
CSS之清除浮動
標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...