文档流作为在Web开发领域最为基础且重要的知识点,加深对它的了解在我们前端开发中尤其重要,想写出更好更完美的页面,我们就必须知道文档流是什么?什么时候元素会脱离文档流?
文档流
HTML中的布局方式有三种:流动布局、浮动布局以及层模型。文档流是HTML元素在网页中默认的、无须额外CSS干预的布局方式。正所谓叫“流”,它让元素像水流一般往下流,循序渐进。它确保了网页内容能够按照从上到下、从左到右的阅读顺序自然呈现,这对于快速构建页面原型和保证基本的可读性至关重要。
什么是脱离文档流
脱离文档流让指定元素从普通文档流中脱离出来,使得在文档流中的其他元素不受其影响。它提供了灵活的布局控制手段,使得开发者能够创造出丰富多样的页面布局效果。
让元素脱离文档流的几种属性:
- display属性
决定了元素如何与其他元素布局以及自身内部的内容如何布局。例如,block
让元素独占一行,inline
让元素在行内显示,inline-block
结合了两者的特性,而none
会让元素完全脱离文档流并且将元素隐藏。
举出例子(以下都用此代码作为初始布局):
对应效果为:
当我们给shang类加上display:none;
效果变为:
页面上仅剩下了.xia盒子
,说明不仅shang类
不显示了,它的子元素也消失了,并且从文档流中脱离,黑色盒子来到页面最上方。
- float属性
允许元素向左或向右浮动,从而使元素脱离正常的文档流,周围的文本和行内元素会围绕它进行排列,但不会影响同级的块级元素布局,除非这些块级元素也设置了浮动。
当我们给shang1类
加上float:right
:
效果变为:
可见,蓝色盒子脱离文档流从左边来到了右边。
- position属性
CSS中常用到的布局属性,其中可取:
static
(默认值):元素按照正常文档流布局;relative
:元素仍在文档流中,但可以相对于自己原本的位置进行偏移;absolute
和fixed
:使元素完全脱离文档流,根据最近的非static定位的祖先元素或视口进行定位。
- clear属性
清除浮动元素对周围内容的影响,确保元素在浮动元素下方显示,这也间接调整了文档流中的布局,常用写法为:clear:both;
。
此时我们换个例子,我们先给蓝色盒子写上浮动:
对应效果:
往.xia类
中添加clear:both;
:
效果变为:
可见,黑色盒子到了浮动元素蓝色盒子的下面。
结语
脱离文档流在Web设计与开发中同样扮演着重要角色,作为前端工程师的我们,在面对设计稿,对页面中元素精确的定位才能让网页更完美地呈现。此文是我给出的一些让元素脱离文档流的基础css属性,希望对大家有所帮助。
原文链接:https://juejin.cn/post/7374608546481078299