非浮动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; }

和这个html

<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