CSS：影响元素在文档流中布局的几种属性

文档流作为在Web开发领域最为基础且重要的知识点，加深对它的了解在我们前端开发中尤其重要，想写出更好更完美的页面，我们就必须知道文档流是什么？什么时候元素会脱离文档流？

文档流

HTML中的布局方式有三种：流动布局、浮动布局以及层模型。文档流是HTML元素在网页中默认的、无须额外CSS干预的布局方式。正所谓叫“流”，它让元素像水流一般往下流，循序渐进。它确保了网页内容能够按照从上到下、从左到右的阅读顺序自然呈现，这对于快速构建页面原型和保证基本的可读性至关重要。

什么是脱离文档流

脱离文档流让指定元素从普通文档流中脱离出来，使得在文档流中的其他元素不受其影响。它提供了灵活的布局控制手段，使得开发者能够创造出丰富多样的页面布局效果。

让元素脱离文档流的几种属性：

• display属性

决定了元素如何与其他元素布局以及自身内部的内容如何布局。例如，block让元素独占一行，inline让元素在行内显示，inline-block结合了两者的特性，而none会让元素完全脱离文档流并且将元素隐藏。

举出例子（以下都用此代码作为初始布局）：

对应效果为：

当我们给shang类加上display:none;

效果变为：

页面上仅剩下了.xia盒子，说明不仅shang类不显示了，它的子元素也消失了，并且从文档流中脱离，黑色盒子来到页面最上方。

• float属性

允许元素向左或向右浮动，从而使元素脱离正常的文档流，周围的文本和行内元素会围绕它进行排列，但不会影响同级的块级元素布局，除非这些块级元素也设置了浮动。

当我们给shang1类加上float:right：

效果变为：

可见，蓝色盒子脱离文档流从左边来到了右边。

• position属性

CSS中常用到的布局属性，其中可取：

1. static（默认值）：元素按照正常文档流布局；
2. relative：元素仍在文档流中，但可以相对于自己原本的位置进行偏移；
3. absolute和fixed：使元素完全脱离文档流，根据最近的非static定位的祖先元素或视口进行定位。

• clear属性

清除浮动元素对周围内容的影响，确保元素在浮动元素下方显示，这也间接调整了文档流中的布局,常用写法为：clear:both;。

此时我们换个例子，我们先给蓝色盒子写上浮动：

对应效果：

往.xia类中添加clear:both;：

效果变为：

可见，黑色盒子到了浮动元素蓝色盒子的下面。

结语

脱离文档流在Web设计与开发中同样扮演着重要角色，作为前端工程师的我们，在面对设计稿，对页面中元素精确的定位才能让网页更完美地呈现。此文是我给出的一些让元素脱离文档流的基础css属性，希望对大家有所帮助。

原文链接：https://juejin.cn/post/7374608546481078299