HTML文档流和脱离文档流

文档流:也就是我们通常看到的由左到右、由上而下的元素排列形式，在网页中每个元素都是默认按照这个顺序进行排序和显示的.

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

脱离文档流的几种方法:

1.绝对定位

2.固定定位

3.浮动

原文地址：https://www.cnblogs.com/fantianlong/p/9949476.html

时间： 2024-11-09 09:37:26

HTML文档流和脱离文档流的相关文章

标准文档流与脱离文档流

在网页当中,所有的元素都有自己的占位. 标准文档流指在没有CSS干预的前提下,块级元素独占一行,可以自行定义宽.高:而行内元素并排显示,宽.高为auto. 常见的块级元素有: <address>地址<caption>表格表格标题<div>划分区域.区块<dl>定义列表<dt>定义列表中的项<dd>列表中定义条目<form>创建一个表单<h>标题标记<hr>一条横线<li>定义列表项目&l

常规流又叫做文档流:在没有CSS的干预下,块级元素独占一行,宽高可设:行内元素并排显示,宽高自动. 脱离文档流又叫做浮动流:元素在进行浮动后就是脱离文档流: 注意:浮动流在进行摆放的时候要避开常规流: 常规流在进行摆放时无视浮动流: 子级元素浮动后导致父级高度坍塌: 清除浮动书写格式:fixed:after { content: " "; display: block; clear: both;} 属性值说明 clear none 默认 left 清除左浮动,元素在左浮动

position脱离文档流与浮动脱离文档流的区别

以前我觉得position:absolute;是可以脱离文档流的,float:left;也可以脱离文档流,就觉得二者是一样的,感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题,结果证明我错了...下边是一个demo. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 &l

css脱离文档流

Q:什么是文档流? A:简单的说可以理解为元素在页面上出现的先后顺序. Q:什么情况下会脱离文档流? A:当使用“浮动”与“绝对定位”时. Q:脱离文档流就不占据空间了吗? A:可以这么说.更准确地一点说,是一个元素脱离文档流之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离? A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里. 需要注意的是,使用float脱离文档流时,其他盒子

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g

DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q

网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

CSS中脱离文档流是什么意思?

如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中的父节点? 脱离文档流只是对html文档的一种解析方案的说法而已.脱离文档流是相对正常文档流而言的.正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序.比如写了5个div块.正常文档流就是依次显示这5个div块.从左往右,自上而下的顺序.脱离文档流就是指它

css之float之非完全脱离文档流

非完全脱离文档流左右结构div盒子重叠现象,一般是由于相邻两个DIV一个使用浮动一个没有使用浮动.一个使用浮动一个没有导致DIV不是在同个"平面"上,但内容不会造成覆盖现象,只有DIV形成覆盖现象. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s