一、什么是文档流?

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

这个应该不难理解,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. java 获取用户输入

    import java.util.Scanner; public class Sample { public static void main(String[] args) { int num; Sc ...

  2. cocos游戏: 不规则响应区域处理

    1.问题:平时使用的按钮之类的都是规则图形,但是有些比如一些世界地图之类的,地图块是不规则的,边缘都是弯弯曲曲的,而且有些有交叉,处理这样的点击块就比较麻烦了2.几点解决思路2.1 如果地图块之间有点 ...

  3. Javascript笔记:作用域和执行上下文

    一.作用域 Javascript的作用域规则是在编译阶段确定的,有声明时的位置决定. JS中有全局作用域,函数作用域,块级作用域(ES6引入). 1. 全局作用域 在整个程序生命周期内都是有效的,在任 ...

  4. C++ 类中的3种访问权限和继承方式

    访问权限:public 可以被任意实体访问,protected 只允许子类(无论什么继承方式)及本类的成员函数访问,private 只允许本类的成员函数访问.三种继承方式分别是 public 继承,p ...

  5. BCompare注册文件+密钥被撤销解决方案

    注册码: rssAPVg2OpBjDVo3E0DhGWrjPIq0hsTSuNz13wTuzVHfb2mRgO9bZKn9Bl42D5YEyMSYPXsxzcb08dqbRlbzWNJzJXE6YVa ...

  6. Linux record

    1.设置ubuntu密码刚安装好的ubuntu系统,没有root密码,需要用户去手动设置的. sudo passwd root 输入2次密码即可. 2. Linux下is not in the sud ...

  7. antd Table 可伸缩列没有效果

    把antd 中的Table可伸缩示例代码,下载到自己的代码中发现,鼠标放到表格的边框上,并没有出现可伸缩鼠标样式,最后的解决方法是在css样式中添加下面的样式,就解决问题了. .react-resiz ...

  8. Server SQL2008对文件的基础操作—01

    1.一个文件的基本框架为:文件名.文件地址.文件大小.文件最大的大小.文件的增量(Filegrowth). 2.文件有mdf.ndf.ldf 三种文件的区别. 3.文件组可以进行文件的管理 FileG ...

  9. selenium登录爬取知乎出现:请求异常请升级客户端后重试的问题(用Python中的selenium接管chrome)

    一.问题使用selenium自动化测试爬取知乎的时候出现了:错误代码10001:请求异常请升级客户端后重新尝试,这个错误的产生是由于知乎可以检测selenium自动化测试的脚本,因此可以阻止selen ...

  10. C# - Winform - DevExpress - GridControl 任意条件控制Row背景色。

    private void gvSendConfirm_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCusto ...