html 中脱离文档流的方式 （div 脱离文档流）

最新推荐文章于 2025-05-26 19:17:36 发布
最新推荐文章于 2025-05-26 19:17:36 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KLS_CSDN/article/details/118424548
本文详细介绍了网页布局中元素如何脱离文档流，包括浮动元素、绝对定位和fixed定位的原理及应用，帮助理解它们如何在页面布局中不再占用原始空间，从而实现复杂的网页设计效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

元素脱离文档流之后，不在文档流中占据空间。

  1. 浮动脱离文档流
  2. 绝对定位脱离文档流
  3. fixed 脱离文档流（与绝对定位相似）

 

脱离标准流(2)定位
m0_53698336的博客
07-05 747
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！ css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 绝对定位 添加三个div分别加上class <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> 给one
HTML脱离文档流的三种方法
热门推荐
theLostLamb的博客
03-17 4万+
一、什么是文档流？将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。二、什么是脱离文档流？元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在...
CSS之盒子的浮动——脱离文档流与浮动带来的两个影响
lxnyttkx的博客
05-26 1652
但此方法不灵活，通常不推荐，除非确实需要固定高度(因为有时候我们确确实实希望父盒高度由子盒决定，比如说动态渲染的场景就不适合)。解题思路：编写出几个盒子，再根据需要向上或向左或向右浮动，并且浮动过程中盒子遵循排布规则。1、当子元素设置浮动后脱离文档流，父元素无法感知子元素的高度，导致自身高度计算为0。2、父元素塌陷后，其下方的非浮动元素会向上移动，与浮动子元素产生覆盖或重叠现象，:第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟。题目:根据前面的例题，改编出父盒的高度塌陷的代码。
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
Paranoidyang的博客
03-14 2万+
所谓脱离文档流，即将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当没看到它，两者位置重叠都是可以的。这里，通过讲解浮动脱离文档流（float）和绝对定位脱离文档流（position:absolute）的区别，让大家对这一概念有更深的认识。浮动脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 我们先利用下面代码在普通流中
HTML脱离文档流分析
weixin_42839354的博客
12-06 342
元素脱离文档里流，即不再在文档流中占据空间，而是处于浮动状态，其他文档流元素将忽略该元素并填补该元素的空间。 脱离文档流有以下几种方法 1.float 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围 例如 &lt;html&gt; &lt;head&gt; &lt;title&gt;脱离文档流&lt;/title&gt; &lt;s...
HTML元素脱离文档流
weixin_44117767的博客
07-04 513
一、什么是文档流？ 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。 二、什么是脱离文档流？ 元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。 脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 三、怎么脱离文档流？ 1：float 使用floa
脱离文档流和恢复文档流的方法
Zeus
08-13 3085
个人博客地址：[http://www.zhsh666.xyz/](http://www.zhsh666.xyz/) 文章目录 一、文档流 1. 什么是文档流？ 2. 什么是脱离文档流 二、怎么脱离文档流 1. float 2. position a. position：absolute b. position：fixed c. position：relative 三、怎么恢复文档流 1...
position:relative;会不会脱离文档流
最新发布
07-06
我们正在讨论CSS中的position: relative属性是否会使元素脱离文档流。 根据引用[3]的说明：relative以自身的占位为基线做偏移。也就是说，元素设置了position: relative后，它仍然保持在文档流中原来的位置，但是...
flex固定后其他文件脱离文档流
07-14
在 CSS 中，当一个元素的定位属性设置为 `fixed` 时，它会脱离文档流，并且相对于浏览器窗口进行定位。其他元素会忽略该元素的存在，不会受其影响，也不会占据其位置。 如果你使用 Flexbox 布局，而想要其他元素...
bootstrap 5版本如何将脱离文档流拉下来
11-10
在Bootstrap 5中，如果你想让某个元素脱离文档流并固定在屏幕底部（类似于页脚），你可以使用`position: fixed`属性配合`bottom: 0`来实现。但是，Bootstrap并没有直接提供用于将整个页面布局拉下来的类，通常我们会...
文档流html开发中遇到的高度塌陷 浮动 定位产生的问题,.pptx
12-10
然而，当我们对元素应用`float`属性，比如`float:right`，这个元素就会脱离正常文档流，向右移动，同时不再占用原来在文档流中的空间。这可能导致一个严重的问题，即“高度塌陷”。例如，如果所有子元素都浮动了，...
将一个 ＜div＞ 脱离文档流并固定在距离网页顶端 10px 的位置
m0_49101942的博客
02-20 350
脱离文档流：使用或。定位到顶部：通过top: 10px控制垂直位置。水平定位：使用leftright或调整。层级控制：通过z-index确保元素不被其他内容覆盖。根据具体需求选择fixed或absolute。若需元素始终可见（如悬浮提示），选fixed；若需在特定容器内定位，选absolute。
脱离文档流
bujiongdan的博客
11-19 338
div要移动，添加动画，要脱离本来的文档流 把div脱离文档里： +position:absolute; top:10px; left:10px; right:10px; bottom:10px;   div的父级元素里： +position:relative   因为，正常div是排队的。...
HTML元素脱离文档流的三种方法
2402_84987408的博客
03-19 274
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
当一个div脱离文档流时，怎么让他绝对的左右居中！
weixin_33957648的博客
12-03 1097
2019独角兽企业重金招聘Python工程师标准>>> ...
标准文档流、脱离文档流及脱离文档流的3种方式
weixin_43312391的博客
09-07 5021
1、如果元素不再满足浏览器的默认布局排版，也就是说将元素从默认的布局排版中拿走，此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流，此时就是脱离文档流了。2、元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。3、脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。既要实现既要并排，又要设置宽高，此刻就要脱离标准流。
脱离文档流的三种方法
icbjhbcjkbda的博客
10-16 6393
HTML元素脱离文档流
css使元素脱离文档流+浮动
你好牛蛙！
10-25 7664
块元素在文档流中默认垂直排列。 要我们设置块元素水平排序，我们可以设置块元素为行内块元素或者设置块元素脱离文档流 float使块元素脱离文档流(浮动) float w3school上面这么解释 语法： float:值 可能的值： left 元素脱离文档流向左浮动。 right 元素脱离文档流向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 这是正常情况下块元素在文档流中的情况： 当使div2脱离文档流： 这里设置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值