文档流是文档中可显示对象在排列时所占用的位置。

文档流简述

编辑

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)

详细说明

编辑

比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。看看CSS 2.0对position的定义：检索对象的定位方式。共有5个取值。 static：默认值，无特殊（静态）定位。对象遵循HTML定位规则。 absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 inherit：继承值，对象将继承其父对象相应的值。

sticky

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

脱离文档流分析

　先来了解一下block元素和inline元素在文档流中的排列方式。

　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

[1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）

问题1：浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响

浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。如下第一个例子box2是浮动框，其后跟一个块元素；例子2是浮动框后跟一个内联元素。

<head><meta charset="UTF-8"><title></title><style type="text/css">#box1{background-color:pink;width:100px;height:100px;}#box2{background-color:green;width:100px;height:100px;float:left;}#box3{background-color:red;width:200px;height:200px;}</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮动</div>
<div id="box3">box3</div>
<!--<span id="box3">span3</span>-->
</bod

问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。

（1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。

解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。如上面的例1中box2宽度是100，只需要对box3设置margin-left：102px就可以实现不重叠。

（2）、上下结构div盒子重叠现象

 1 <head>2     <meta charset="UTF-8">3     <title></title>4     <style type="text/css">5         *{margin:0;padding:0;}6         .container{border:1px solid red;width:300px;}7         #box1{background-color:green;float:left;width:100px;height:100px;}8         #box2{background-color:deeppink; float:right;width:100px;height:100px; }9         #box3{background-color:pink;height:40px;}
10     </style>
11 </head>
12 <body>
13
14 <div class="container">
15     <div id="box1">box1 向左浮动</div>
16     <div id="box2">box2 向右浮动</div>
17 </div>
18 <div id="box3">box3</div>
19 </body>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

解决方法：

1、要么给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“..container是可以设置一个高度即可解决覆盖问题。

2、要么清除浮动。清除浮动后的效果如下：

2-1：使用css clear清除浮动，在.container盒子闭合前加clear样式清除浮动。

深入理解clear属性：

clear属性规定元素的哪一侧不允许出现浮动元素，他的语法如下：

clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

2-2：给父元素设置overflow：hidden来清除浮动。

这里我们可以这样理解：overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

按 Ctrl+C 复制代码

<head>
<meta charset="UTF-8">
<title>DIV 相互重叠</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{border:1px solid red;width:300px;overflow:hidden;}
#box1{background-color:green;float:left;width:100px;height:100px;}
#box2{background-color:deeppink; float:right;width:100px;height:100px; }
#box3{background-color:pink;height:40px;}
.clear{clear:both;}
</style>
</head>
<body>

按 Ctrl+C 复制代码

[2]定位

分别分析一下position的几个值

（1）static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

（2）relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。（这里的占据文档流指的是占据原来的位置，而不是占据相对定位后的位置。个人理解：相对定位后的元素则会叠加到新位置的上，覆盖原先新位置上的元素，但是在新位置上不实际占据空间）如下图所示，头像相对定位前在box1盒子下方，头像相对定位后，头像原来的位置空着，但是下方的带有文本的盒子并没有移动上来。

这是相对定位的一个主要用法，图文混排。

注意，标签中设置了position:relative;属性，不设置left，right和top，bottom的值，这些值则默认值为0。注意，即使不设置值同样起到了相对定位作用，其子孙级别标签使用position:absolute;时同样会起到定位效果，position：relative的另一个主要用法：方便绝对定位元素找到参照物。

（3）绝对定位

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置。

另外要注意：仅使用margin属性布局绝对定位元素的情况

　　此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
　　图9中，使用margin属性布局相对定位元素。
　　层级关系为：
　　<div ——————————— position:relative;
　　<div—————————-没有设置为定位元素，不是参照物
　　<div———————-没有设置为定位元素，不是参照物
　　<div box1
　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
　　<div box3
　　效果图：

（4）fix定位

fixed

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

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

position：fixed 作用就是无论客观影响有多大，他依然不受影响；

.div1{
background-color:#FF0000;
width:2000px;
height:2000px;
}

.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}

文档流、脱离文档流分析相关推荐

html 浮动脱离文档流,脱离文档流（正常流-文档流）
一.文档流定义将窗体自上而下分成一行一行, 块级元素从上至下. 行内元素在每行中按从左至右的挨次排放元素,即为文档流. 二.行内元素.块级元素.行内块级元素 1.行内元素 span.em.i,以及有 ...
html哪个属性不会脱离文档流,html 在不给高的时候使用float为什么下面的文档会脱离文档流...
body{font-family: 微软雅黑;background-color: #F5F5F5;font-size: 14px;} *{margin:0;padding: 0;} .top{widt ...
html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
脱离文档流和半脱离文档流（详解）
脱离文档流脱离文档流是指,该元素脱离了文档中.不再占据默认分配的空间,它下面的元素会上去补位. 可以理解为脱离文档流的元素离开了它的座位,后面的同学可以坐前面,坐它的位置. 但是一般来说脱离文档流分 ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
什么是脱离文档流？什么是文档流？
浏览器默认的排版方式就是文档流(或者叫标准流)排版方式.脱离文档流就是不按照文档流的排版方式. 文档流的排版方式是:块级元素垂直排布,行内元素和行内块级水平排布.不脱离就是按照这种方式排版,从左到右, ...
CSS使用display:incline与float:left的区别：脱离文档流参差不齐
脱离文档流对元素设置display:inline-block ,元素不会脱离文本流, 而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果参差不齐:display的空隙可以使用font- ...
CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
[css] 什么是脱离文档流？有什么办法可以让元素脱离标准的文档流？
[css] 什么是脱离文档流?有什么办法可以让元素脱离标准的文档流? 文档流就是指元素在 HTML 文档中位置顺序决定排布的过程.HTML 元素有块级元素和行内元素,块级元素一个占一行,行内元素在一行 ...

文档流、脱离文档流分析

文档流简述

详细说明

脱离文档流分析

fixed

文档流、脱离文档流分析相关推荐

最新文章

热门文章