文档流及定位position和float的关系

关于文档流，及脱离文档流需要了解的知识

文档流实际上是一种民间说法，官方说法是常规流（normal flow）
文档流的官方概念 : 元素按照其在HTML文件中的位置顺序，决定它在显示器上如何排布的过程。主要的形式是自上而下，一行接一行，每一行从左至右。

但以上描述的 文档流 概念十分抽象晦涩，对初学者十分不友好。其实 文档流 和现实生活中马路上的车的行驶规则十分相似。

先来说说html元素的分类

假设有些车太宽了，只能够独自占据一行车道，那就是 块级元素（block element），比如 div，ul，section 这些都是经典的块级元素。有的车比较瘦小，可以并排行驶，那就是就是 内联元素（inline element），又叫行级元素，或者行内元素，比如 span 就是经典的内联元素。从左至右从上到下的车流中，有添加了某些附加属性的超级变形金刚车型，他们的车由默认的只能陆用，变成了路空两用，也就是说可以飞起来。那些还在地上行驶的车辆，可以填补已经飞到天上的车辆空出来的位置，也可以不填补。​

文档流的通俗解释

文档流用人话来说就是：

1. 天生为 块级元素 的这种车（div为最典型的块级元素），我们可以自定义它的高度宽度（可对其设置width，height属性)，天生就独占一整条车道（width默认为100%，且默认在其前后添加换行）.。 ​
2. 天生为 行级元素 的这种车（span为最典型的行级元素），我们不能自定义他的高度和宽度（设置width，height无效），天生就喜欢和别人追尾式行驶，不会独占车道（显示时不换行）。
3. 两辆车之间的定位，不是兄弟元素与兄弟元素之间的定位，而是父元素与子元素之间的定位。因为所谓定位，必须一个参照物，如果按相对于兄弟元素定位，那么就有个前提就是兄弟元素是已知的、确定的。但很多时候，比如文章的p标签， 可多可少，根本确定不了，假设p标签根据某个兄弟元素定位，但如果p标签的兄弟突然增多了或者减少了呢？所以这种定位方式不现实。相对于父元素定位就不存在这个问题，因为元素肯定会有父元素，没有父元素也有根元素html。
4. 除了默认的static之外的所有车都是可以飞上天的
5. relative的车飞上天之后原来的车位并不会被后来的车补上，而且他自己围着原来的车位转。
6. 但是absolute和float的飞上天后原来的车位会被文档流紧接着的车补上。
7. relative飞上天后并不改变元素的display属性，行级的飞上天之后还是行级的，不会无缘无故变成块级。
8. absolute的车飞上天的话， 行级元素则默认强制变块级，因为天上空间充裕，想走多少车道就多少车道，不用和原来在陆地上做行级元素那样憋屈，并且 width 默认为 100%.
9. 如果担心飞起来的absolute元素把底下的元素遮挡了，可以使用z-index属性来调整堆叠顺序。​z-index是z-坐标轴的意思，index有索引，指数，坐标轴的意思。屏幕上有xy轴，空间上那就有个z轴，垂直屏幕所在平面指向用户的那条。可以取值-1，0，1，就像几张图层。使用z-index属性的前提是元素的position属性要设为relative或者absolute，他对position为static的不起作用。

元素的定位方案详解

元素的 定位方案（Positioning Schemes）一共分四种：
1. 静态定位：position: static; （这是所有dom元素默认的定位方案）
2. 相对定位：position: reletive;
3. 浮动定位：float: left; float: right
4. 绝对定位：position: absolute; position: fixed;

position: static（静态定位）：

• 元素遵循文档流。此时4个定位偏移属性 top，right，bottom，left不会被应用，元素说好听点元素是静态的，说难听点就是是死的，不会动，html如何从左到右从上到下书写，他就怎样排列。

position: relative（相对定位）：

• 元素遵循文档流，并且参照自身在常规流中的位置通过 top，right，bottom，left 这4个定位偏移属性进行偏移，并且偏移时不会影响文档流中的任何元素。
• position: reletive; 的元素很没气节，如果他原来在常规流的默认位置改变了，那他也会跟着变位置，永远围着整个body自己原来的那一小块老地方转。​所以说相对定位没有脱离文档流。
• 一般相对定位元素都是作为绝对定位的参考元素来用的。设置了position为absolute的元素会找到最附近的设置了position为relative的父元素，然后相对于他进行偏移。这个就类似于那个设置了relative的那个父元素是个黑帮大boss，这一片归我管，我里面的设置了absolute的子元素位置都是相对我而言的，和我在文档流旁边的兄弟的没有关系。

float: left / float: right （浮动定位）:

• 会脱离文档流造成父元素高度坍塌，可触发BFC机制或者清除浮动，以解决浮动带来的父元素高度坍塌。
• float和position: absolute的区别:
  1. .float会默认让同时有图片和文字的对象有文字环绕图片的效果，类似于旧报纸的文章排版。
  2. float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。文本（属于content flow）
  3. 当使用过浮动后，父元素因为子元素浮动而引起的内部高度为0，要清除浮动

clear : both;

position: absolute（绝对定位）：

• 对象脱离文档流，此时偏移属性参照的是离自身最近的相对定位元素，如果没有相对定位的元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
• 就是这个东西就是在那里了，不管我爹生的其他娃的位置怎么动，我的位置只跟我爹的位置有关。绝对定位元素脱离了文档流，飞上天有了自己的领地自成江湖。

position: fixed（固定定位）：

• 是一种特殊的绝对定位，也脱离文档流，但偏移定位是以窗口也就是html这个根节点为参考。当滚动浏览器窗口出现滚动条时，对象不会随着滚动。

在一点，容易弄混的地方

1. 在同一元素中，最外层元素（一般是body）是所有后代元素的父参照物，即给的偏移量都是相对于父参照物进行偏移的，而position:relative/absolue/fixed可以让元素脱离文档流,脱离文档流的元素就相当于形成自己的一个新平面，从而会改变元素的父参照物
2. 父参照物和父元素是没有必然联系的

特别声明，大部分是搬运伊利蠢牛奶在加上自己的一些理解，特此记录一下。
作者：伊利蠢牛奶
链接：https://www.zhihu.com/question/24529373/answer/704041782
来源：知乎