脱离文档流与脱离文本流（absolute脱离文档流吗?）

itomcoil 2025-02-04 14:24 13 浏览

脱离文档流与脱离文本流

根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。那么我们接下来来看看他们的区别吧。

使用浮动(float)

正常布局下:

????
????????In?CSS,?normal?flow?includes?block?formatting?
????????of?block-level?boxes,?inline?formatting?of?
????????inline-level?boxes,?and?relative?and?sticky?
????????positioning?of?block-level?and?inline-level?boxes.
????


????
????????Normal?Flow
????


????Normal?Flow
????
????????In?the?absolute?positioning?model,?a?box?is?
????????removed?from?the?normal?flow?entirely?(it?has?
????????no?impact?on?later?siblings)?and?assigned?a?
????????position?with?respect?to?a?containing?block.
????

给#nf元素开启浮动:

从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本却并没有无视#nf元素的位置。

该情况说明,浮动会使元素脱离文档流,但是并不会脱离文本流,在文本流中还是占有位置的

使用绝对定位(position:absolute)

未使用绝对定位(position:absolute)之前,页面的代码和样式与浮动案例中的初始情况相同

给#nf元素开启position:absolute:

从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本同样也无视#nf元素的位置。

该情况说明,绝对定位(position:absolute)会使元素脱离文档流和文本流。

使用绝对定位(position:fixed)

未使用绝对定位(position:fixed)之前,页面的代码和样式与浮动案例中的初始情况相同

给#nf元素开启position:fixed:

从上面的图中,我们可以看出#fl,#ap1,#ap2元素以及其内部文本都无视了#nf元素的位置。

该情况说明,绝对定位(position:fixed)会使元素脱离文档流和文本流。

总结

脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

浮动(float)与绝对定位(position:absolute/fixed)之间的区别就是

(1)浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。

(2)绝对定位会使元素脱离文档流,同时也会脱离文本流, 在于其他盒子的文本内容计算布局的时候,不占位置。

sticky css

上一篇：新笔记本电脑到手需要装些什么软件呢?
下一篇：如何在WordPress网站显示最新置顶文章

脱离文档流与脱离文本流（absolute脱离文档流吗?）

脱离文档流与脱离文本流

使用浮动(float)

使用绝对定位(position:absolute)

使用绝对定位(position:fixed)

总结

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

PS零基础入门教程:Photoshop 2024工具详解—标尺工具

Python三目运算符(三元运算符)用法详解

PS 零基础入门 040:图层样式选项

a4尺寸是多大像素多少厘米长宽，4k的纸是多大的纸是a4的吗

PS零基础入门教程:Photoshop 2024工具详解—直线工具

Pony - 最智能的 Python ORM 框架

Python 最常用的语句、函数有哪些?

六种方法实现Python文件之间的通信方式