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 高 ...
随机推荐
- 测试用例与PUCCH
- Flask知识总结
1.-----------------路由设置的2种方式----------------- 查看源码,route方法里,本质是执行app.add_url_rule() 因此可以这么写(主流方式): @ ...
- 微信小程序配置合法域名和业务域名
在微信小程序的开发过程中,当需要请求第三方网站数据时,都是直接调用wx.request接口的: xxxx:function(){ wx.request({ url: 'xxxxxxxxxx', dat ...
- Linux内核0.11代码阅读(转)
最近决定开始阅读Linux 0.11的源代码. 学习Linux操作系统的核心概念最好的方法莫过于阅读源代码.而Linux当前最新的源代码包已经有70MB左右,代码十分庞大,要想深入阅读十分困难.而Li ...
- springboot中使用kaptcha验证码
maven依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptc ...
- javascript当中的构造函数的用法
5)构造函数的用法: 例 3.5.1 <head> <meta http-equiv="content-type" content="text/h ...
- 初步自学Java小结
本周学习Java使我印象最深刻的Java开发环境的安装与设置,通过下载Eclipse IDE for Java Developers初步搭建好了Java开发环境,之后利用视频了解了Java程序的类型及 ...
- eslint全局变量报错 xxx is not defined
找到.eslintrc.js,添加 "globals": { "你的全局变量": true }, 如果globals已经存在在里边加入你要忽略检测的全局变量即可 ...
- SQL Server 检查和处理死锁问题
SELECT spid, blocked, DB_NAME(sp.dbid) AS DBName, program_name, waitresource, lastwaittype, sp.login ...
- openresty入门文章(笔者自用)
推荐好的openresty入门介绍文章:https://www.cnblogs.com/digdeep/p/4859575.html