自适应布局的float问题

Question

在阅读大神的教程时，对“自身浮动法”中：侧栏要放在主栏的前面产生了疑问。

在我的理解中，float是脱离普通流（文档流）的，那么为什么他的顺序是固定的呢？就像absolute，应该和普通流没有关系才对。。。

修改代码（浮动的侧栏排列在main之下）

CSS代码：

html,body{margin:0;height:100%;}
#main{height:100%;margin:0 210px;background:#FFE6B8;}
#left,#right{width:200px;height:100%;background:#A0B3D6;}
#left{float:left;}
#right{float:right;}

HTML代码：

<div id="main"></div>    
        <div id="left"></div>
        <div id="right"></div>

教程链接

Answer 1

文档流由上至下，由左至右依次解析。
你改变顺序布局就改变了解析顺序。

注意：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它 。

HTML普通流/文档流

Answer 2

兄弟，2009年的文章了，求你们了，看看新技术吧

Answer 3

昨晚查阅资料也有了自己的理解：
按照普通流的默认的流动布局解析方式，先设置main的width，这一行就没有空间；
然后设置“float”元素，这里我没有考虑到普通流的渲染顺序：width在前，float在后；
因为width在前，所以元素需要占据空间，可是上一行的空间已经没有了，所以他们会挪到下一行；

-----详细资料可以看月影大神给的链接--------

可能会有人想，为什么不将float放在前面呢?
因为float有“包裹性”，设置了float之后，宽度自适应内容，此时再设置width不起效。