1.問題描述
在W3CSchool學習web前端時，看完CSS定位-浮動這一節后，感覺沒有什么問題。但是在CSS高級-分類這一節的中進行實踐時，遇到了如下問題。測試地址：浮動的簡單應用。
完整的html+CSS源碼如下：
<html> <head> <style type="text/css"> img { border:solid 1px green; display:block; } #id1{ float:left; } div{ border:solid 2px blue; } p{ border:solid 1px red; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /> <img id="id1" src="/i/eg_cute.gif" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </body> </html>呈現效果： 
我的問題：
W3CSchool中講解CSS定位，浮動那一節中，明確說對框1進行向左浮動時會遮住框2，原因是浮動后，元素脫離了文檔流，不占據空間，想左或向右移動直至左右兩邊碰到包含框的兩邊。為什么我對兩張圖中的之一進行浮動時，不會遮住另一張圖呢？
2.我的理解錯在了哪里
首先，再一次查看W3CSchool官網權威對CSS浮動的講解，詳見：CSS浮動。
原文截圖如下： 
圖中紅框的這句話，明明說到對框進行浮動時，會脫離文檔流，若向右浮動直到，直到它的右邊框碰到包含框的右邊緣，隨后便說道，若向左浮動，脫離文檔流並向左移動，直到它的左邊緣碰到包含框的左邊緣。因為這樣，就會導致原有的框被浮動的框覆蓋。
按照W3CSchool的理解，怎么也不明白為什么我測試的源碼中，框中的圖片並沒有覆蓋另一個框中的圖片呢？
W3CSchool是權威教程，正確性經得住考驗，但是有些細節還是說的不太明確。我的問題就出現上圖中紅框中的那句話。
這句話容易產生誤導，浮動的框會脫離文檔流，因此不占用文檔中的空間。但是並非任何情況下浮動框向左或向右移動直至左右兩邊碰到包含框的兩邊才停止。如果某個浮動框在移動的過程中，碰到了包含內容的框時，也會停止。
因此，上圖中的紅框中的那句成立的前提是：浮動框在移動的過程中，碰到框沒有內容或者框內的內容會自我調整位置以防止被覆蓋。比如<p>標簽中的文本遇到浮動的框就自我調整位置，以防止被覆蓋。