Non-плавали ДИВ выталкивает плавали 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/.

---

Я ищу объяснение, почему это происходит. То, как я это понимаю, два плавающих divs удаляются из потока документов, а центральный div с краями. Учитывая это, я не понимаю, почему порядок divs повлияет на этот макет. Поскольку правый div размещен, центральный div не должен подталкивать его к следующей строке.

Answer 1

Плавающие div должны появляться в потоке перед предметами, которые должны течь вокруг них.

«Элементы после того, как плавающий элемент обтекает его». http://www.w3schools.com/css/css_float.asp