div布局-與position修改為float的元素相鄰的內聯元素會如何排版？

與position修改為float的元素相鄰的內聯元素會如何排版？

#box1{
background-color:red;
width:200px;
height:100px;
float:left;
}
#box2{
background-color:blue;
width:200px;
height:100px;
}
#box3{
background-color:yellow;
width:200px;
height:100px;
}
div id="box1" /div img src="test.jpg" width="200px" height="100px"/
div id="box2" /div
div id="box3" /div
為了代碼的正常顯示，所有的尖括號都被我去掉了。我的問題是：
第一個div因為float屬性脫離了文檔流,那麼按照文檔流的概念，圖片應該從第一行第一列開始排版，可是為什麼在實際中圖片不會被box1擋住呢？

最佳回答：

box1 雖然脫離了文檔流，但並沒有釋放他所占據的空間
你把 < img src="test.jpg" width="200px" height="100px"/> 調到 box1 前面就可看到這一點

你若像我這樣處理 html 標記（在 < 後面加個空格）測試代碼時就方便了許多了