float,absolute脱离文档流的总结
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脱离文档流的总结的更多相关文章
- float之脱离文档流
所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
- 脱离文档流两操作，float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- float的元素脱离文档流，但不完全脱离，只是提升了半层；
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- 子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
- css脱离文档流
作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
随机推荐
- Qt-QML-Charts-ChartView-编译错误-ASSERT: "!"No style available without QApplication!
昨天本来是回家想好好琢磨一下使用Chart来绘制曲线的,奈何在建立项目的时候也就卡住了,加上心情比较烦躁,也没有耐心寻找答案就草草了事.所以今天继续搞定这个. 上图是Qt 的编译错误截图 QML de ...
- Fiddler使用总结(二)
在上一篇中介绍了Fiddler的基本使用方法.通过上一篇的操作我们可以直接抓取浏览器的数据包.但在APP测试中,我们需要抓取手机APP上的数据包,应该怎么操作呢? Andriod配置方法: .确保手机 ...
- 前端开发工程师 - 06.Mini项目实战 - 项目简介
第6章--Mini项目实战 项目简介 Mini项目简介-Ego社区开发 回顾: 页面制作 页面架构 JavaScript程序设计 DOM编程艺术 产品前端架构 实践课Mini项目--Ego: 主题:漫 ...
- 关于html2canvas清晰度
最近有个小项目 需要生成海报让用户去分享~~~vue做的,海报通过html2canvas 生成. 遇到的最大问题是生成图片的清晰度~~网上找了好多方法. 放大倍数!~网上找的~~ var cntEle ...
- leetcode-二叉树的层次遍历（Java）
给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其层 ...
- 开源自动驾驶仿真平台 AirSim (2) - 编译 AirSim
AirSim 的官方 Github: https://github.com/Microsoft/AirSim 对于 Unreal Engine 来说,AirSim 其实是作为一个插件存在,说白了就是把 ...
- Python中的Dictionary
Dictionary的创建 1 字面量 >>>D = {'a': 1, 'b': 2} >>>D {'b': 2, 'a': 1} 2 keyword参数 > ...
- Scrum1
Scrum1 组员 任务分工 贡献 林泽宇 团队分工.撰写博客.修改完善需求规格说明书.整理代码规范 李涵 后端架构设计 尹海川 logo设计修改.数据库数据 郏敏杰 课堂展示.查阅资料.整理关键和难 ...
- 常用算法Java实现之选择排序
选择排序算法在每一步中选取最小值来重新排序,通过选择和交换来实现排序. 具体流程如下: 1.首先从原数组中选择最小的1个数据,将其置于第一个位置. 2.然后从剩下的数据中再选择其中最小的一个数据,并将 ...
- TCP系列09—连接管理—8、TCP Reset
我们在介绍TCP头的时候,提到过其中有个RST标志位.当一个TCP报文中这个标志位打开的时候,我们叫做reset包(严格的说应该叫做reset段,但是很多时候段包帧并不加以区分)或者简单称呼为rese ...