文档流、脱离文档流分析

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

文档流简述

编辑

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

详细说明

编辑

比如网页的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>

*{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>

</div>

</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;

}

、有float属性的元素会跑

代码：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue; float: left;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

在浏览器中的样式：

从图中可以看出，div本为块级标签，本应各自占一行，但是添加浮动属性之后，都向左浮动，跑到了一排。

二、如果上一行没有float元素，那么float元素是跑不上去的

代码：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

从图中可以看出，div1没有floa属性，所以div2不能浮动上去；而div2有浮动属性，所以div3会浮动上来。

三、有float属性的元素是脱离文档流的，非浮动元素会忽略掉前面的浮动元素

代码：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;float:left;}

#box2{ background: red;float: left; }

#box3{background: black;width:150px;height:100px; }

在浏览器中的样式：

从图中可以看出，div1和div2浮动在文档之上，div3忽略了div1和div2，div1和div2没有影响div3的位置。

篇文章讲了文档流相关知识，网页中html元素会按照标准规则排列，块级元素从上到下，行内元素从左到右排列。如果这时想让一个元素排到右侧，怎么办？

这时就可以使用浮动float 和定位 position ，今天主要介绍float，关于float属性稍微有点难理解，它是把双刃刀，会用的会做出各种很好的效果，不会用的反而问题越来越多。

float 属性有以下几个值：

none —— 没有浮动（默认值）。
left —— 左浮动。
right —— 右浮动。
inherit —— 继承父元素的float。

如下示例：

左浮动

右浮动

这里注意：右浮动是从右到左排列元素，子元素的html实际位置是按照，子元素1>子元素2>子元素3的顺序，但是右浮动的显示效果是子元素1在最右边，依次向左，正好和元素实际位置相反。

float 浮动可归纳以下几点：

浮动本意是什么？
使元素脱离文档流，但不脱离文本流。
会使父元素高度塌陷。
浮动和行内元素区别。
浮动的破坏性，影响相邻元素的布局。
如何清除浮动。

浮动本意是什么？

浮动float最初设计的目的是实现文字环绕的功能，如下图所示：

没有使用浮动：

使用浮动后：

从上图看到图片脱离了文档流浮动到左边，但是没有脱离文本流，文本环绕着图片。

文字环绕效果除了float属性能够实现，再找不到其它方法，这就是它的真正用处，但是在早期网页制作中，它被用来实现各种布局，比如水平的菜单，或者左边图片右边文字等等效果。但是在使用float的过程中出现了各种问题，比如父元素高度塌陷，破坏相邻元素的布局等等。

使父元素高度塌陷

当一个元素里面的子元素使用了float浮动，其父元素如果没有设置高度或者高度小于浮动元素的高度时，父元素就会出现如下示例：

没有使用浮动：

使用浮动后：

如上图红色边框就是父元素，没使用float前，它的高度被子元素撑开。当使用float后可以看到父元素的高度变成0了，这就是高度塌陷。

浮动和行内元素区别

float 浮动可以使一个行内元素变成块级元素，准确地说应该更像是 inline-block 行内块级元素，但又不完全一样。看下如下示例：

没有使用float前：

子元素是一个块级元素，占满了一行，其宽度默认为100%。

使用float后：

可以看到，子元素的宽度变了，等于其内容的实际宽度。和行内元素一样，但是不同之处就是浮动可以使元素浮动到左侧或者右侧，如上图。行内元素则不行，只能从左到右排列，这就是float的特殊之处，所以常常被用来制作一些复杂的布局效果。

浮动的破坏性

float虽然能够解决一些布局的问题，但是用不好就会造成页面布局混乱，出现各种奇怪的问题，如下示例：

没有使用float前：

如上图，所有元素从上到下排列，父级那个元素和上下相邻。

使用float后：

此时可以看到，父级那个元素下面的相邻元素2，由于父级元素高度塌陷，也向上移动位置，这样导致浮动元素就会覆盖下面的相邻元素2，这不是我们期望的结果。

怎么解决了？要么给父级元素设置一个固定的高度，这个高度要大于浮动元素的高度，或者使用clear属性清除浮动。

如何清除浮动

为了解决浮动造成的破坏，此时就要使用各种方法来清除浮动，常见的有以下三种方法：

1、给浮动元素父级元素使用 overflow

如下示例：

overflow:hidden;
zoom:1;

可以看到父级元素的高度不塌陷了，被子元素撑高了。由于没有设置高度，其高度等于子元素的高度。

overflow 的缺点就是，当子元素宽度和高度超出父级时，会隐藏部分子元素内容。

在早期为了兼容ie浏览器，除了使用overflow：hidden；还要加上zoom：1；否则会出现一些怪异的现象。

2、使用clear属性

clear 属性用来是一个元素不受相邻浮动元素的影响，它有 both （清除左右浮动），left（清除左浮动），right（清除右浮动），none （允许其相邻元素有浮动，默认值）。

如下示例：

clear：both；

看到这里和使用overflow的效果一样，不同之处是，要额外在父级元素中增加一个标签来做清除浮动。这也就是它的最大缺点。

3、使用 after伪类

使用after伪类，可以不用额外增加一个多余的标签，如下示例：

.fix:after{
    display:block; 
    content:''; 
    clear:both; 
    line-height:0; 
}

综上所述，方法3是最后的。以上三种方法都是解决父级高度塌陷问题，还有一种情况就是给相邻元素2设置clear 属性，会是什么效果？

如下示例：

<div class="d2" style="clear:both;">
        相邻元素2
  </div>

如上图看到相邻元素2，恢复到默认文档流中的位置，但是发现父级元素的高度仍然塌陷，这种清除浮动的情况是比较特殊的，和之前的不一样。

总结

float 是不是有点难懂，没办法浮动的初衷就不是用来布局的，被玩坏了。但是不要紧，float在如今网页布局中已经很少使用，css3已经有了新的方案，比如flex等。所以关于本篇了解下就可以了，不需要完全掌握。

感谢阅读，欢迎指出错误或者补充。

上篇：前端入门——网页中的文档流和布局

在线咨询

上一篇：谈谈反馈设计怎么做
下一篇：你知道关闭页面时怎么向后台发送消息吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

文档流、脱离文档流分析

文档流简述

详细说明

脱离文档流分析

fixed

浮动本意是什么？

使父元素高度塌陷

浮动和行内元素区别

浮动的破坏性

如何清除浮动

3、使用 after伪类

总结

您的项目需求