非浮动的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