作者：张秋怡
链接：http://www.zhihu.com/question/24529373/answer/29135021
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Q: 脱离文档流就不占据空间了吗？
A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。

Q: 脱离文档流是不是指该元素从dom树中脱离？
A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。

那么脱离文档流是什么样子的呢？下面是上锤子的时间~ 以前面文档里写的三种布局方式为例
下文中文档的HTML代码如下：

<body>

	<div id="outofnormal">

		Out of normal:

		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam consequatur voluptates temporibus. Voluptates eius similique asperiores cupiditate fugit hic atque quisquam?

	</div>

	<h2>Normal Content</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et incidunt non, ut eos nesciunt quaerat. Enim, minus.</p>

</body>

CSS代码如下，为了看得更清楚，加一个padding

#outofnormal {

	width: 200px;

	background-color: cyan;

	padding: 10px;

}

首先普通情况下（也就是在normal flow里）是这样的
要被玩的div：
&amp;lt;img data-rawheight="417" data-rawwidth="351" src="https://pic1.zhimg.com/e3a50101163ad20ea2c85e15b6470460_b.jpg" class="content_image" width="351"&amp;gt;跟在后面的h2：跟在后面的h2：
&amp;lt;img data-rawheight="639" data-rawwidth="436" src="https://pic3.zhimg.com/cebf598edd0178129247fe950d717bda_b.jpg" class="origin_image zh-lightbox-thumb" width="436" data-original="https://pic3.zhimg.com/cebf598edd0178129247fe950d717bda_r.jpg"&amp;gt;可以看到两者是垂直排列，padding互相顶着。3D视图的话就是这样，大家排排坐：可以看到两者是垂直排列，padding互相顶着。3D视图的话就是这样，大家排排坐：
&amp;lt;img data-rawheight="422" data-rawwidth="471" src="https://pic2.zhimg.com/3ab078cb1fef1a23b01c718e84bda53d_b.jpg" class="origin_image zh-lightbox-thumb" width="471" data-original="https://pic2.zhimg.com/3ab078cb1fef1a23b01c718e84bda53d_r.jpg"&amp;gt;

第二种情况：
加上float:left了之后，蓝色的div就脱离文档流了，变成了这样：
&amp;lt;img data-rawheight="615" data-rawwidth="526" src="https://pic1.zhimg.com/df64a9482e0c0e155244f3be461a7968_b.jpg" class="origin_image zh-lightbox-thumb" width="526" data-original="https://pic1.zhimg.com/df64a9482e0c0e155244f3be461a7968_r.jpg"&amp;gt;因为蓝色的div脱离了文档流，跟在后面的h2和p的因为蓝色的div脱离了文档流，跟在后面的h2和p的盒子都当做没看到这个div的样子去定位，所以他们都顶着浏览器左边和顶部的边框。但是有趣的是，h2和p里面的文本（属于content flow）却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。这就是float的特性，其他盒子看不见被float的元素，但是其他盒子里的文本看得见。
&amp;lt;img data-rawheight="627" data-rawwidth="728" src="https://pic3.zhimg.com/fe0ec0f33a4ac526ad32ab35d275edba_b.jpg" class="origin_image zh-lightbox-thumb" width="728" data-original="https://pic3.zhimg.com/fe0ec0f33a4ac526ad32ab35d275edba_r.jpg"&amp;gt;3D视图的话就是这样。我插~3D视图的话就是这样。我插~
&amp;lt;img data-rawheight="463" data-rawwidth="890" src="https://pic4.zhimg.com/9021d1a199b2cc8395b5c280846c4ae3_b.jpg" class="origin_image zh-lightbox-thumb" width="890" data-original="https://pic4.zhimg.com/9021d1a199b2cc8395b5c280846c4ae3_r.jpg"&amp;gt;我插~我插~
&amp;lt;img data-rawheight="383" data-rawwidth="758" src="https://pic3.zhimg.com/9ffeb88b3d163caa06ff265c46822bce_b.jpg" class="origin_image zh-lightbox-thumb" width="758" data-original="https://pic3.zhimg.com/9ffeb88b3d163caa06ff265c46822bce_r.jpg"&amp;gt;我插~我插~
&amp;lt;img data-rawheight="460" data-rawwidth="424" src="https://pic2.zhimg.com/05b3bdb24a4aaa14f1cd6ab9eabaf4a5_b.jpg" class="origin_image zh-lightbox-thumb" width="424" data-original="https://pic2.zhimg.com/05b3bdb24a4aaa14f1cd6ab9eabaf4a5_r.jpg"&amp;gt;为什么能插呢？因为蓝色div被旁边的盒子无视了呀~为什么能插呢？因为蓝色div被旁边的盒子无视了呀~

第三种情况：absolute positioning。
删掉float: left，加上postion: absolute。和float一样的是，旁边的盒子无视了蓝色div的存在，也是顶着左边边框定位。但是~ 文本也无视了蓝色div的存在，顶着左边边框定位！
&amp;lt;img data-rawheight="628" data-rawwidth="714" src="https://pic4.zhimg.com/5a0552d7af2042352d49055df3484087_b.jpg" class="origin_image zh-lightbox-thumb" width="714" data-original="https://pic4.zhimg.com/5a0552d7af2042352d49055df3484087_r.jpg"&amp;gt;&amp;lt;img data-rawheight="622" data-rawwidth="797" src="https://pic3.zhimg.com/dfcd3fc3f5439a10b7fa3fd311225e66_b.jpg" class="origin_image zh-lightbox-thumb" width="797" data-original="https://pic3.zhimg.com/dfcd3fc3f5439a10b7fa3fd311225e66_r.jpg"&amp;gt;3D视图下也是成功无视之，插入~3D视图下也是成功无视之，插入~
&amp;lt;img data-rawheight="426" data-rawwidth="459" src="https://pic1.zhimg.com/4bd78656641cbd9783fcbc9d5e4a2c00_b.jpg" class="origin_image zh-lightbox-thumb" width="459" data-original="https://pic1.zhimg.com/4bd78656641cbd9783fcbc9d5e4a2c00_r.jpg"&amp;gt;
总结：
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute
positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

css脱离文档流的更多相关文章

  1. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  2. css 脱离文档流

    一.float <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&quo ...

  3. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  4. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

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

    如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中 ...

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

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  8. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  9. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

随机推荐

  1. gridControl 中CellValueChanged，ShowingEditor，CustomDrawCell的用法

    private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventA ...

  2. HDU 5800 To My Girlfriend

    背包变形.dp[i][j][g][h]表示前i个数字,和为j,有g个必选,有h个必不选的方案数. 答案为sum{dp[n][j][2][2]}*4 #pragma comment(linker, &q ...

  3. POJ 3419 Difference Is Beautiful

    先处理出每一个i位置向左最远能到达的位置L[i].每一次询问,要找到L,R区间中的p位置,p位置左边的L[i]都是小于L的,p位置开始,到R位置,L[i]都大于等于L,对于前者,最大值为p-L,后者求 ...

  4. HDU 5775 Bubble Sort

    对于一个数,可以记录3个位置:初始位置,终点位置,最右边的位置. 初始位置和终点位置容易计算.最多边的位置即为初始状态下该数的位置+该数之后还有多少数比该数小. 三个位置中的min即为leftpos, ...

  5. mysql 1053错误，无法启动的解决方法

    mysql 1053错误,无法启动的解决方法 windows2003服务器中,服务器重启后Mysql却没有启动,手动启动服务时提示1053错误. 尝试了以下方法,终于解决. 1.在DOS命令行使用 第 ...

  6. VBS控制鼠标移动和点击(附源代码下载)

    森思:想用vbs来控制鼠标的移动和点击,虽然按键精灵可以做到,但做这么简单的事情不想启动那么大一个程序,所以自己用VC写了一个小程序,可以让VBS来控制鼠标移动和点击. 用法: 移动鼠标到桌面坐标20 ...

  7. 如何禁用电脑USB接口

    方法一,BIOS设置法 重新启动计算机,在开机过程中,点击键盘上的“Delete”键,进入BIOS设置界面,选择“Integrated Peripherals”选项,展开后将“USB 1.1 Cont ...

  8. GlusterFS常用命令小结

    # /etc/init.d/glusterd start # /etc/init.d/glusterd stop # /etc/init.d/glusterd status 2.       开机自动 ...

  9. hdu_5761_Rower Bo(xjb猜公式)

    题目链接:hdu_5761_Rower Bo 题意: 让你求一个物理问题 题解: xjb猜公式,由题目样例可得,答案为8/7,然后我们可以xjb猜出公式为v1*a/(v1*v1-v2*v2),然后特判 ...

  10. Entity Framework 学习中级篇4—存储过程(下)

    在EF中,各个实体的插入.更新和删除也都通过使用存储过程来完成,以便提高点性能.这个类似于数据集.其步骤是:先定义存储过程,然后在VS的可视化设计器,设置存储过程映射即可. 下面,以为Supplier ...