非浮動的div推壓浮動DIV向下行

Question

有了這個CSS

#left { background: red; float: left; width: 100px; height: 100px;} 
#right { background: green; float: right; width: 100px; height: 100px;} 
#center { background: blue; height: 100px; margin-left: 110px; margin-right: 110px; } 

和這個網站

<div id='left'></div> 
<div id='right'></div> 
<div id='center'></div> 

它創建了一個固定的列，變量列，則另一個固定列。

當訂單向左，向右，居中時，正如預期的那樣工作 http://jsfiddle.net/6X4fN/5/。

但是，當把左，中，右，右div推到下一行http://jsfiddle.net/6X4fN/6/。

---

我正在尋找一個解釋，爲什麼會發生這種情況。我理解它的方式是，將兩個浮動div從文檔流中移除，然後將中心div與邊距一起縮小。鑑於此，我不明白爲什麼div的順序會影響這種佈局。由於右側div浮動，所以中央div不應將其推到下一行。

Answer 1

浮動的div必須出現在流動項目之前的流動中。

「浮動元素之後的元素將圍繞它流動。」 http://www.w3schools.com/css/css_float.asp