css 文档流

# 文档流

参考：https://blog.csdn.net/u013594477/article/details/80735530 (opens new window)

# 标准文档流

标准流就是浏览器按照各种元素标签排版布局中默认的状态，浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列。也就是没有被其他排版浮动和定位相关的 CSS 属性干扰的就叫标准流。

# 脱离文档流

脱离文档流：这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

# 导致脱离文档流的几种情况

float
absolute
fixed

# float(浮动)

作用：让多个块级元素（display: block）在同一行显示

语法：float: left / right / none

原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

# float 影响

对自身的影响：浮动的元素会具有行内块元素的特性

任何元素都可以添加浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

（1）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

（2）浮动的盒子中间是没有缝隙的，是紧挨在一起的

（3）如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

对兄弟元素的影响：遮盖住其他块级元素

接上文所述，当一个元素设置为 float 后，将呈递为内联元素。此时它将不会独占一行，会“浮起来”，与其他元素不在一个层面。其它盒子会无视它的存在，但是会为这个元素让出位置，环绕在它周围。因为浮动元素“浮起来了”，没有设置 float 的块元素则会自动填充浮动元素留下的空间，浮动元素位于这些元素的上方，发生元素重叠，也就是许多人经常遇到的块元素被部分隐藏的原因。而想要消除浮动元素对其他元素的影响，可以通过 clear 来消除浮动。（注：大部分是添加一个空 div 来消除浮动影响。）
父元素影响-父元素坍塌

如果父级元素原本没设置高度，计划用子元素撑开父级元素。此时子元素因为 float 上浮，则父级元素的高度就会因为自身没设置而坍塌。即父元素的高度，是以未浮动元素的高度为准，所以会导致元素不占据空间.那么该父元素的高度就是 0

如果想要消除这个影响，可以直接设置父元素的高度，或者将父元素也设置为浮动（对后续元素会产生影响），为父元素的 overflow 设置为 hidden 或者 auto（会隐藏溢出的内容），当然啦，也可以用上文说到的方法——设一个空的 div，clear 一下就行。

# 清除浮动的方法

使用 after 伪元素清除浮动（推荐）

原理：通过清除伪元素的浮动，达到撑起父元素高度的目的。

.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

1
2
3
4
5
6
7
8
9
10
11

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7 不支持伪元素：after，使用 zoom: 1 触发 haslayout.;

使用 before 和 after 双伪元素清除浮动（推荐）

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

1
2
3
4
5
6
7
8
9
10
11

优点：代码更简洁

缺点：用 zoom:1 触发 hasLayout.

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）

缺点：添加无意义标签，语义化差，不建议使用

父级添加 overflow 属性（父元素添加 overflow:hidden）

原理：通过触发 BFC 方式，实现清除浮动

BFC 在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使 BFC 区域内只有一个浮动元素，BFC 的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

# postion 定位

# absolute(绝对定位)

其位置相对于最近已定位（static 定位以外）的父元素，如果元素没有已定位的父元素那么它的位置相对于窗口位置为定位

# static(默认的静态定位)

即没有定位，遵循正常的文档流对象，静态定位的元素不受 top、left、right、bottom 影响。

# relative(相对定位)

其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。

# fixed

元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。

# sticky(粘性定位)

基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像 position:relative;它的表现就像 position:fixed;，它会固定在目标位元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定效。否则其行为与相对定位相同。

# float 和 absolute 区别

float 占位，absolute 不占位

使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

而对于使用 absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

# fixed 和 absolute 定位区别

是否跟随滚动条滚动

没有滚动条的情况下没有差异

在有滚动条的情况下，fixed 定位不会随滚动条移动而移动，而 absolute 则会随滚动条移动

# 层级问题(z-index)

总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。

定位高于浮动，浮动高于标准流。（高低和占不占位置无关）

# z-index 用法

必须有定位。（除去 static 之外）。
给定 z-index 的值为层级的值。（不给默认为 0）
- 层级为 0 的盒子，也比标准流和浮动高。
- 层级为负数的盒子，比标准流和浮动低。
- 层级不取小数
- 层级一样，后面的盒子比前面的层级高。
- 浮动或者标准流的盒子，后面的盒子比前面的层级高。
- abselute 是不占位置的，relative 是站位的的。而层级的高低，是和占不占位置没有关系的。

更新时间: 2/19/2022, 4:10:36 PM

← css 盒子 css BFC→