一、什么是文档流?

将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流。

这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流。

二、什么是脱离文档流?

元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。

脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

三、怎么脱离文档流?

1:float

使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
float: left;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div> </body>
</html>

运行效果:

这段代码中把红色的框设置为了左浮,所以红色的框称为了浮动状态(浮动在蓝色框的上面),而蓝色框占用了原来空色框的位置。

注意到,蓝色框中的文本依然认为红色框存在,所以为红色框让出了位置。

由于div是块状元素,所以456出现在下方。

2:absolute

absolute称为绝对定位,觉得应该称为相对定位,

因为使用absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,

并且这个父类元素的position必须是非static定位的(static是默认定位方式)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: absolute;
}
.third {
width: 200px;
height: 200px;
border: 3px solid green;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div> </body>
</html>

运行效果:

通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态,可以看到绿色的框被蓝色的框遮挡。

emmm...,看起来貌似没有问题,但是还记得前面说的absolute是相对谁定位的吗?

相对非static元素的父级定位的,这里蓝框的父级就是html,所以应该是相对于html定位,

但是代码中没有提供相对位置,所以只能浮动在原来该元素在文档流中的位置上方。

3:fixed

完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
position: fixed;
right: 0;
top: 0;
}
.third {
width: 200px;
height: 200px;
border: 3px solid green;
}
html {
border: dotted;
}
</style>
</head> <body> <div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div> </body>
</html>

可以很明显的看出,蓝色的框是相对于html进行定位的。

如果不提供相对位置的话,蓝色的框会浮动在其原先在文档流中的位置上方。

HTML元素脱离文档流的三种方法的更多相关文章

  1. float的元素脱离文档流,但不完全脱离,只是提升了半层;

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

  2. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

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

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

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

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

  5. HTML文档流和脱离文档流

    文档流:也就是我们通常看到的由左到右.由上而下的元素排列形式,在网页中每个元素都是默认按照这个顺序进行排序和显示的. 脱离文档流:元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理 ...

  6. css脱离文档流

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

  7. css中哪些属性会脱离文档流

    一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中

  8. CSS脱离文档流&浮动

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

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

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

随机推荐

  1. Eureka工作原理分析

    demo源码地址:https://github.com/flyingJiang/SpringCloud 首先,单独使用Eureka. Eureka整合Ribbon 未完待续……

  2. Eclipse:设置自动补全,提高编程效率

    一.设置自动补全 1.进入eclipse的window里的perferences页面 2.找到java->Editor->Content Assist设置界面 3.在Auto activa ...

  3. CentOS7 配置ip地址

    1.查看网络配置文件 可能因为不同的系统,配置文件都不一样,总体来说,配置文件都是 前缀:ifcfg-eno + 后缀:随机数组成 进入到 /etc/sysconfig/network-scripts ...

  4. win 10 上解压安装 MySQL 8

    win 10 上解压安装 MySQL 8 # 进入到mysql的bin目录底下操作: # 初始化mysql mysqld --initialize --console # 安装mysql服务 mysq ...

  5. Mysql char(10) 与 varchar(10)的区别

    DROP TABLE test_string; ), col_varchar )); INSERT INTO `test_string` VALUES ('mysql', 'mysql'); 在创建数 ...

  6. Unity3d—GUI按钮控件

    这是自己的第一篇记录自己的技术文章,自己还是个菜鸟,有错误之处还望大家能够多多指点. 1.在project视图中创建C#脚本,我命名为 Gui_test 2.然后打开该脚本,输入以下代码: using ...

  7. Java学习:反射机制简介

    反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调用对象的方法的功能称为ja ...

  8. Java并发专栏(一)—— Process vs Thread

    一.前言 程序是代码和数据的集合,是一种静态实体.不具有代码执行和数据处理的能力,更多是一种行为的描述. 如果将程序和处理器结合,处理器将程序加载至内存,然后执行程序代码处理数据.这时就是可执行的程序 ...

  9. 【Elasticsearch】【WEB】java web服务连接es elasticsearch始终报错,无法正常连接使用的错误解决历程

    前情提要: web服务往华为云上迁移 ================内网的好环境,相关配置=================== 1.web服务关于ES的集群配置如下: elasticAddress ...

  10. 单片机成长之路(51基础篇) - 023 N76e003 系统时钟切换到外部时钟

    N76e003切换到外部时钟的资料很少(因为N76e003的片子是不支持无源晶振的,有源晶振的成本又很高,所以网上很少有对N76e003的介绍).有图有真相: 代码如下: main.c #includ ...