文档流

文档流小解

很多人用定位，浮动，解释说什么脱离文档流啊 ，可能有的人觉得很简单，有的人不明所以，只是觉得它是一个书上说解释 定位亦或浮动的特殊方式；
接下来我讲的真的很简单 ，但是很多初学者，比如我就忽略了它，文档流，什么事文档流？ 脱离文档流有是什么， 虽然比较短。。。。
简单一点说 ，正常文档流是指 ，从上到下从左至右的文档书写格式，实际上它就是这样的；所谓的脱离文档流就是指，不在遵守上边的规则；而是由初始的display（显示）从右上到左下 并且下层视而不见； 之于为什么初始的display是从右上到左下我的解释是规定这应该是被规定的；
接下来介绍举子个例子吧：
position css中强大的布局样式：

    //它的值有 好几个 常用的 relative   fied  absolute  static(默认)
      <style>
             .container{
                       width: 100%;
                       height: 100px;
                       background-color:#0f0;
             }
                    .page1{
                               position: relative;
                              background-color: red;
                              width: 100px;
                              height: 100px;
                              margin: 0 auto;
                    }
          </style>
             <div class="container">
                    <div class="page1">

                    </div>
          </div>
     /* 会发现   红色的块会距中   说明没有脱离文档流
        但是如果你将。.page1下 position 的属性变为 absolute；
        红色的块便不会在 居中  （已经脱离正常文档流）你可在.container里面加上 内容 发现它会在  右上 100px*100px的方块中被遮盖；
*/

由于比较简单我就不展示了 ；； 文档流这个概念很重要；position：同样很重要；；；恩恩 就只是这样；
相似的浮动，与positon的几个值总是那么充满基情 。但是又不一样 比如 position可以开启层级 浮动带有方向 更深层的东西 我不做详解 可以自己搜；