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 高 ...
随机推荐
- vjudge I - Vladik and fractions 一道小学生的提。
原题链接:https://vjudge.net/contest/331993#problem/I Vladik and Chloe decided to determine who of them i ...
- 【Python】1.PyQT5界面初尝试
1->通过pycharm打开QTdesigner.创建新Form. 2->选择Widget创建 3->不添加任何控件 点击保存 pycharm列表如下 后缀名位ui的 即QTdes ...
- [CF994B] Knights of a Polygonal Table - 贪心,堆
有 n 个骑士想决战.每个骑士都有能力值(互不相同),且身上带有一些金币.如果骑士 A 的能力值大于骑士 B ,那么骑士 A 就可以杀死骑士 B ,并获得骑士 B 身上的所有金币.但就算是骑士也不会残 ...
- 从ASCII到Unicode再到UTF-8的历史原由
编码 大小 支持语言 ASCII 1个字节 英文 Unicode 2个字节(生僻字4个) 所有语言 UTF-8 1-6个字节,英文字母1个字节,汉字3个字节,生僻字4-6个字节 所有语言 具体解释: ...
- Selenium3+python自动化012+日志logging基本用法、高级用法
1.关键字: login 登录 log 日志 logging python日志模块 2.什么叫日志: 日志用来记录用户行为或者代码的执行过程 3.日志使用的地方: 1.排错的时候需要打印很多细节来帮助 ...
- Linux - mysql 异常: ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists
问题描述 ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists 解决方案 删除:/var/lock/su ...
- IDEA 在SVN上更新代码错误: Error:Server SSL certificate rejected
在IDEA中更新代码到SVN中 ,出现了 Error:Server SSL certificate rejected ---服务器的SSL证书 的错误 之前在网上有找过一些相关的做法,但是 ...
- AcWing 275. 传纸条
#include<iostream> using namespace std ; ; *N][N][N]; int w[N][N]; int n,m; int main() { cin&g ...
- 阿里云安装Nginx+vue项目部署
阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...