dom元素脱离文档流,有如下几种方式:

1. float

脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局。
父元素会无视他,因此无法获取其高度,这也就是浮动元素父元素高度塌陷的原因。

下面是一个例子:
特别注意的是,浮动元素后面元素的文字虽然对浮动元素形成环绕,但其位置依然受后面元素的宽高的影响。如果
后面元素的宽度过小,文字将不能在右侧环绕,而是显示在浮动元素下方。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
color:#FFF;
}
#container {
width:500px;
height:250px;
background:#039;
}
#A {
float:left;
width:200px;
height:200px;
background:#C00;
}
#B {
width:480px;
height:230px;
background:#000;
}
</style>
</head>
<body>
<div id="container">
<div id="A">你好</div>
<div id="B">
第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。
</div>
</div>
</body>
</html>

2. absolute

完全脱离文档流,其他元素无视他,在其下方布局

3. fixed

完全脱离文档流

4. relative

半脱离文档流,相对自身位置偏移,其自身位置还在,依然占据文档流

参考:https://blog.csdn.net/cxl444905143/article/details/17361045
         https://blog.csdn.net/thelostlamb/article/details/79581984

float,absolute脱离文档流的总结的更多相关文章

  1. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

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

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

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

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

  4. HTML元素脱离文档流的三种方法

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

  5. 脱离文档流两操作,float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

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

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

  7. 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...

  8. css脱离文档流

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

  9. CSS脱离文档流&浮动

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

随机推荐

  1. Jetty 嵌入式开发(实例)

    我尝试了jetty几个版本,类的使用有些差异,在此记录下jettyVersion = 9.0.2.v20130417 的部分实例 maven 依赖及配置: <properties> < ...

  2. treap 1296 营业额统计

    有一个点答案错误,求大神指教 #include<cstdio>#include<iostream>#include<cstdlib>#include<ctim ...

  3. kmalloc/kfree,vmalloc/vfree函数用法和区别

    http://blog.csdn.net/tigerjibo/article/details/6412881 kmalloc/kfree,vmalloc/vfree函数用法和区别 1.kmalloc ...

  4. Tomcat遇到的问题The Tomcat server configuration at ServersTomcat v5.5 Server at localhost-config is missing. Check..

    一.解决方法 删除Servers视图,重新创建一个即可.

  5. TV TimeShift和PVR的区别

    Timeshift是在PVR菜单下,PVR菜单下一般有两个功能一个是刻录功能,一个是Timeshift功能,这两个功能都需要u盘或者内存卡的支持,刻录时把当前的节目刻录进优盘想看的时候还可以打开看,T ...

  6. story 泄露服务器libc版本

    记录下学到的姿势,利用信息泄露得到服务器libc 至少两个函数偏移,利用libc-databse得到服务器libc版本 传送门 泄露脚本如下 from pwn import * context.log ...

  7. dotNet core 应用部署至 centos(超详解附截图)

    文章来源:公众号-智能化IT系统. 需要安装的插件以及支撑架构 1.dotnetSDK dotnet 相关命令是属于 .NET Core command-line (CLI) 的一部分,Microso ...

  8. 实体转xml 并以string输出

    <?xml version="1.0" encoding="utf-8"?><Root> <Header> <Mess ...

  9. python 数据结构之二叉树

    二叉树关键在构建和遍历,python实现相对简单,我们在实现需要用到类,分别设置爱左右子树,根节点,然后从根进行遍历,进行判断,若为空进行树的构建,非空则返回到列表中即可,我在进行遍历时产生了一个错误 ...

  10. WebMvcConfigurerAdapter已过时

    Spring Boot2.0的版本(创建的时候自动选择的这个版本),然后编译器告诉我WebMvcConfigurerAdapter已过时了 @Deprecated public abstract cl ...