脱离文档流和恢复文档流的方法

最新推荐文章于 2024-10-11 21:40:39 发布
最新推荐文章于 2024-10-11 21:40:39 发布
阅读量567 收藏 2
点赞数
分类专栏： css面试题 文章标签： 前端 css
原文链接：https://blog.csdn.net/theLostLamb/article/details/79581984
版权

一、文档流

1. 什么是文档流？

将窗体自上而下 分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流（normal stream又称普通流）
在html 中，html元素都是盒模型，盒子模型占用一定的空间，依次排放在html 中，形成了文档流。

2. 什么是脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

二、怎么脱离文档流

1. float

使用float可以脱离文档流。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float: left;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
 
</body>
</html>

没有加浮动以前：
在这里插入图片描述

加了浮动以后结果如下：

在这里插入图片描述
这段代码中把红色的框设置为了左浮，所以红色的框称为了浮动状态（浮动在蓝色框的上面），而蓝色框占用了原来空色框的位置。注意到，蓝色框中的文本依然认为红色框存在，所以为红色框让出了位置。由于div是块状元素，所以456出现在下方。

2.absolute

absolute称为绝对定位，其实博主觉得应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: absolute;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

不加绝对定位效果如下：
在这里插入图片描述
加了以后：
在这里插入图片描述
通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态，可以看到绿色的框被蓝色的框遮挡。emmm…，看起来貌似没有问题，但是还记得前面说的absolute是相对谁定位的吗？相对非static元素的父级定位的，这里蓝框的父级就是html，所以应该是相对于html定位，但是代码中没有提供相对位置，所以只能浮动在原来该元素在文档流中的位置上方。

下面加上相对位置并把html以dotted的形式显示出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: absolute;
            left: 0;
            top: 0;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
        html {
            border: dotted;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

在这里插入图片描述
结果很明显，蓝色的框遮住了html的点，所以当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

下面举个相对于父级元素定位的栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            position: relative;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: absolute;
            left: 0;
            top: 0;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
        html {
            border: dotted;
        }
    </style>
</head>
 
<body>
 
<div class="first">
    123
    <div class="second">
        456
    </div>
</div>
<div class="third">
    789
</div>
 
</body>
</html>

结果为：
在这里插入图片描述
蓝色的框是相对红色的框进行定位的，具体来说是相对于border。

注意：绝对定位的窗口一般都要设置相对距离，当你同时设置top和bottom的时候，只有top会生效，同理，同时设置left和right的时候，只有left会生效。

3. fixed

完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: fixed;
            right: 0;
            top: 0;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
        html {
            border: dotted;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

运行结果：
在这里插入图片描述
可以很明显的看出，蓝色的框是相对于html进行定位的。当然，如果不提供相对位置的话，蓝色的框会浮动在其原先在文档流中的位置上方。

Note：文档流是在body中的，body在html中，这个在代码结构中也体现出来了，下面的例子可以更直观的看出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
        body {
            border: dotted red;
        }
        html {
            border: double black;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

运行结果：
在这里插入图片描述
最后说一个半脱离文档流的方法，就是position：relative。下面说明一下为什么是半脱离文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: relative;
            top: 100px;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

运行结果：
在这里插入图片描述
可以看到，蓝色的框是浮动了，但是绿色的框却相对于蓝色的框原先在文档流中的位置进行了定位。这就是所谓的半脱离文档流，本体还在文档流中占有位置，但是却可以通过改变位置使其漂浮到其他的地方，其定位方式是相对其原先在文档流中的位置进行定位的。

关键就是知道蓝色框在原来的文档流占用位置，相对定位后还是在原来的位置占据文档流。（类似实体投影到另一个地方）。

以上就是脱离文档流的方法。

最后再多说一句，一般设置relative是为了让absolute有个相对定位的参照。

纵有千堆雪与长街
关注
专栏目录
脱离文档流，position与z-inex的关系
baibaider的博客
04-07 2509
文档流：从上至下，从左至右的布局符合html中标签本身含义的布局，比如某些标签独占一行，有些标签属于行内元素等。脱离文档流：将元素从普通文档流中去掉，其他元素在排版的时候会当作这个元素不存在去排版。什么会导致元素脱离文档流：float：脱离文档流，但其他的元素文字会找到该元素的文字位置。position:absolute：脱离文档流，其他元素完全无视该元素。它的定位取决于它的父元素有没有定位（po...
脱离文档流
jiuweiC的博客
09-03 553
脱离文档流 定义 文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。 脱离文档流 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。 脱离文档流的方法： 1.float:left;2.position: absolute;3.position:fixed 1.float 使用float可以脱离文...
什么是文档流？文档的流的概念与缺陷
最新发布
2401_85545586的博客
10-11 426
文档流对于网页布局的控制和调整非常重要，可以通过设置CSS属性来改变元素在文档流中的位置和布局方式，例如使用浮动、定位、flex布局等。同时，文档流也是响应式布局和流体布局的基础，可以根据浏览器窗口大小的变化自动调整元素的排列方式和布局。是网页布局中的一个重要概念，描述了元素在页面上按照从上到下、从左到右的顺序依次排列的方式。文档流是网页中元素默认的排列方式，也是浏览器渲染引擎根据HTML文档的结构和CSS规则来确定元素位置的基础。
绝对定位（会脱离文档流）—— position: absolute
weixin_48796690的博客
10-09 671
绝对定位
脱离标准流(1)浮动
m0_53698336的博客
07-05 710
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！ css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 浮动是css里面布局最多的一个属性，也是很重要的一个属性。 float：表示浮动的意思。它有四个值。 none: 表示不浮动
行业文档-设计装置-2，3，5-三甲基吡啶的吸附提纯方法.zip
08-31
吸附过程通常涉及以下几个步骤：预处理（去除吸附剂中的杂质）、吸附（将混合气体或溶液通过吸附床）、脱附（用特定溶剂或热解吸使2，3，5-三甲基吡啶脱离吸附剂）和再生（恢复吸附剂的吸附性能）。 在设计装置时，...
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
// 移动元素脱离文档流 style.position = 'absolute'; style.visibility = 'hidden'; style.display = 'block'; // 获取尺寸 var width = getDefaultStyle(element, 'width'); var height = getDefaultStyle...
脱离文档流的方法&&CSS浮动产生的负面影响及解决办法
qq_42204313的博客
09-13 6889
https://blog.csdn.net/theLostLamb/article/details/79581984 一、什么是文档流？ 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。   二、什么是脱离文档流？ 元素脱离文档流之后，将不...
脱离文档流的方法
weixin_48723546的博客
07-05 5589
脱离文档流的常用方法和position属性的可选值
文档流，脱离文档流的方式
weixin_43765747的博客
06-27 350
文档流：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。 脱离文档流： 脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来。 float浮动。 position的absolute和fixed定位。 ...
脱离文档流和半脱离文档流（详解）
程麒阁的博客
07-20 3196
脱离文档流 脱离文档流是指，该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。 可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。 但是一般来说脱离文档流分为两种 全脱离文档 半脱离文档 脱离状态 区别 全脱离 补位元素中无论是有图片还是文字，都会全部上去补位 半脱离 补位元素中有文字和图片的，图片，文字会卡在元素周围，形成环绕效果 代码演示 半脱离文档流 半脱离文档流，遇到文字图片时候，补位元素会卡住，形成环绕效果 css .box1
css中脱离文档流是什么意思
yzt02012的博客
09-14 891
1、脱离文档流:就不占据空间了？ 是的，一个元素脱离文档流后，其他的元素在定位时候回当做没看见他，两者位置重叠都是可以的。 2、脱离文档流不是从dom树中脱离，用浏览器的审查元素可以看到脱离文档流的元素，依然会出现在dom树里 3、实质：  脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档
css中脱离文档流的理解
halze_eyes的博客
01-11 2319
上次去面试一家公司，那家公司的技术总监问我什么叫脱离文档流，当时我一下愣住了，这个是作为一个前端工作者在工作中经常会遇到的问题，我们频繁地用着，然而却不能用语言表达出它的意思。我不由得思考为什么会这样，如果下次有人问我同样的问题，我又将如何作答呢？ 首先从“脱离文档流”这几个字可以看出，它是在脱离开来的，其他元素的布局排版不被影响，对于其他元素来说它就是不存在的。 css中的绝对定位（abso
HTML中是否脱离文档流
qq_27381193的博客
12-03 2107
我们在显示隐藏元素的时候经常会用到把display设置为none，设置为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间。 定位： inhert:规定从父元素继承position属性的值。 static：默认值，没有定位，元素出现在正常的流中。 relative:无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。 absolute:绝对定位使元素的位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值