什么是文档流

2023-11-22 09:13PM

参考：https://zhuanlan.zhihu.com/p/473248675

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。 也就是，每个元素如何占用空间以及其他元素如何相应地定位自己。

在文档流中，元素按照其出现在HTML中的顺序一个接一个地排列，从上到下，从左到右。每个元素占据一定的空间，并且会尽量与其他元素不重叠。这种布局方式是HTML文档默认的布局方式。

文档流的特点包括：

1. 元素按照其出现的顺序从上到下、从左到右进行布局。

2. 元素在水平方向上尽量占据整个可用空间，如果空间不足则进行换行。

3. 元素在垂直方向上按照其在HTML结构中的顺序进行堆叠。

4. 元素在默认情况下是块级元素还是行内元素，会影响其在文档流中的排列方式。

文档流的概念在CSS布局中非常重要。通过使用CSS的定位属性和浮动属性，可以改变元素在文档流中的位置和排列方式，从而实现不同的布局效果。但是，当元素脱离文档流时，可能会导致其他元素的位置和布局受到影响。