float和position:absolute脱离文本流的区别
float和position:absolute脱离文本流的区别
原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏
展开
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;
CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
浮动的元素脱离文档流,但会占据文本空间
浮动后,不指定宽度,默认是内容决定宽度。
非浮动,默认100%
————————————————
版权声明:本文为CSDN博主「paediatrician」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/paediatrician/article/details/52583653
float和position:absolute脱离文本流的区别的更多相关文章
- 脱离文档流两操作,float和position:absolute的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...
- CSS之float vs position:absolute
补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 ...
- float,absolute脱离文档流的总结
dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
- 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...
- [TimLinux] CSS float和position详解
1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...
- float与position间的区别
float与position间的区别: 个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...
- float与position
使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下) 这是当然的 我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦 至于高度 不论有没有float 高 ...
随机推荐
- sqli-labs1-10基础掌握
00x01基于错误的GET单引号字符型注入 首先and 1=2判断是否为数值型sql注入,页面正常,不是 然后’测试,发现页面报sql语句错误,存在字符型sql注入 猜测参数为单引号闭合,用注释语句 ...
- 模块简介与matplotlib基础
模块简介与matplotlib基础 1.基本概念 1.1数据分析 对已知的数据进行分析,提取出一些有价值的信息. 1.2数据挖掘 对大量的数据进行分析与挖掘,得到一些未知的,有价值的信息. 1.3数据 ...
- 记录 Docker 的学习过程 (网络篇之跨主机互通)
下面从node3上操作node3# docker run -d -p 8500:8500 --name consul progrium/consul -server -bootstrap node3# ...
- BZOJ3680 JSOI2004 平衡点 - 随机/近似算法
迭代乱搞了下就过了…… #include <bits/stdc++.h> using namespace std; ],y[],w[]; double xm,ym,wt,k,lambda= ...
- 二分-A - Cable master
A - Cable master Inhabitants of the Wonderland have decided to hold a regional programming contest. ...
- jenkins pipline 如何禁止任务并行
背景: 我测试的一个项目CI包括好几个步骤,但是有的步骤是不能并行的,否则会互相影响 处理过程: [方案一]:不推荐此方案 在每个步骤里面的shell脚本中加进程判断 示例:比如本任务有4个步骤,第2 ...
- ECMAScript基本语法——②注释
单行注释://注释内容多行注释:/*注释内容*/
- NotePad++中如何改变光标样式(转换横着和竖着)?
在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | )
- python2下解决json的unicode编码问题
基础知识: 序列化——json.dumps()函数是将一个Python数据类型列表进行json格式的编码(可以这么理解,json.dumps()函数是将字典转化为json字符串) 反序列化—— ...
- 剑指offer系列——59/60.按之字形顺序打印二叉树/把二叉树打印成多行
Q:请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. A:BFS,偶数层reverse vector&l ...