CSS文档流_html/css_WEB-ITnose

     很多CSS的书籍在谈到CSS的定位机制时都会提到一个关键词“文档流”，然而可能这词对于作者来说简单得不需解释吧，所以很少见到有这词的具体解释，然而本人认为弄懂本概念对能否很好理解整个定位机制来说很关键！网上查了一下网友的理解，再翻了下W3C，结合自己理解。可以用W3C上面的一句话来概括：“元素的位置由元素在 (X)HTML 中的位置决定。”

 

      要很好的理解上面这句话，可以用排除法。CSS的定位机制有3种：普通流、浮动（float：left/right/none）和定位 （position:static/relative/absolute/）。

 

      普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。

 

      例：

 

     

 

      很显然这是最普通的文档流，从左到右，一个挨一个按照顺序01先，02其次，03最后排列。

 

 

 

      一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。

 

      例：

 

 

       为了能更好辨认，我分别给01绿色，02灰色，03黄色。然后再给01左浮动。结果，01脱离了文档流，完全不占空间，所以02顺势顶替了01原来的位置，结果02被01盖住了。

 

        同理，absolute定位跟FLOAT一样，脱离了文档流，不再占原来文档流的空间了。再举一个大家在日常经常遇到的问题来印证?高度自适应

反复想一想，高度自适应的原理其实就是这个：

 

       

       

这是b

       

这是c

       

       这个结构是a包住b和c，颜色不变，a的高度为自动，b的高度为100，C的高度为500。b和c都为左浮动

       效果:

 

 

 

      很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。让他有空间可占，自然就撑开了。试试！

 

      清除后的效果：

 

 

     总结：

 

     1、  CSS的定位机制有3种：普通流、浮动和定位。

     2、  文档流：从上到下，从左到右，一个挨一个的简单或者叫正常布局。

     3、  定位：（position）

 

     Static：保持文档流。

     Relative：相对本身的原始位置发生位移且保持文档流，占空间。

     Absolute：脱离文档流，不占空间且相对于其包含块来定位。

     4、  浮动：（flaot）脱离文档流，不占空间。

     5、  以前总是觉得position：static这个属性很多余，现在看来他的作用就是让元素保持文档流的！

     以上都是我?“1号仔”，在学习的过程中发现的问题，欢迎有更多想法的童鞋们发表意见互相交流，以达到共同进步的效果。