脱离文档流的方法

一、文档流是啥？
HTML中全部元素都是盒模型，盒模型占用一定空间，将窗体自上而下分成一行一行，并且在每行中按照从左往右依次排放元素，称为文档流。

二、什么是脱离文档流？
元素脱离文档流之后就不再在文档流中占据空间，而是处于浮动状态，相当于漂浮在其他元素上方，那么其他元素就会忽略该元素并填补这个元素原来的空间

三、如何脱离文档流？
1.float
使用float脱离文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素周围

可选值：

none默认值 不浮动    left 向左浮动    right 向右浮动

浮动的特点：浮动主要作用是让页面中的元素可以水平排列，可以制作一些水平方向的布局

1.元素设置浮动后会完全从文档流中脱离，不再占用文档流的位置

2.设置浮动以后的元素会先向父元素的左侧或者右侧移动

3.浮动元素默认不会从父元素中移出

4.浮动元素向左或向右移动时不会超过前面的其他浮动元素

5.如果浮动元素的上边是一个没有浮动的元素，则浮动元素上不去

6.浮动元素不会他上边的浮动的兄弟元素，最多和他一样高

2.absolute
绝对定位，使用absolute脱离文档流后的元素，是相对于父类进行定位，如果父类不满足条件就向上查询。父类条件：元素的position必须是非static（默认）定位的。绝对定位元素可以设置外边距，且不会与其他边距合并。定位可以通过上下左右属性决定。

position属性的可选值：

static 默认值 - 元素是静止的 没开启定位

relative 相对定位 - 开启后如果不设置偏移量则元素不会发生任何变化，开启后会提高层级（会在别的元素上面），不会使元素脱离文档流，不会改变元素性质

开启定位后偏移量可以设置元素的位置（只移动自己），原点是元素在文档流中的位置（自己左上角），垂直方向由top和bottom来设置 top是和上面的距离（元素向下走），水平方向left和right 同理 left向右走 right向左走

absolute 绝对定位 - 开启后如果不设置偏移量则元素的位置不会发生任何变化，开启后元素会从文档流中脱离（后面的元素跑上来了），并且会改变元素的性质（行内便成块，块的宽高被内容撑开）

开启后会提高层级 依旧是四个偏移量，原点是相对于其包含块（离当前元素最近的祖先块元素）进行定位的，如果所有祖先元素都没开启定位 则根元素（html）就是他的包含块（最左上）

fixed 固定定位 - 也是一种绝对定位 大部分特点和绝对定位一样

唯一不同的是 固定定位的原点永远参照浏览器的视口（可视窗口）进行定位的（永远左上）--比如永远固定的广告和导航条

sticky 粘滞定位 - 固定到某个位置就不动了 和相对定位特点基本一致

不同点 粘滞定位可以在玉树达到某个位置时将其固定

3.fixed
完全脱离文档流，相对于浏览器窗口（html）进行定位，详情参考上面哦

这篇好文章是转载于：学新通技术网