有了这个 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 不应该将它推到下一行。