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脱离文本流的区别的更多相关文章

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

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

  2. CSS之float vs position:absolute

    补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 ...

  3. float,absolute脱离文档流的总结

    dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...

  4. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  5. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  6. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  7. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  8. float与position间的区别

    float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...

  9. float与position

    使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下)  这是当然的  我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦  至于高度 不论有没有float 高 ...

随机推荐

  1. sqli-labs1-10基础掌握

    00x01基于错误的GET单引号字符型注入 首先and 1=2判断是否为数值型sql注入,页面正常,不是 然后’测试,发现页面报sql语句错误,存在字符型sql注入  猜测参数为单引号闭合,用注释语句 ...

  2. 模块简介与matplotlib基础

    模块简介与matplotlib基础 1.基本概念 1.1数据分析 对已知的数据进行分析,提取出一些有价值的信息. 1.2数据挖掘 对大量的数据进行分析与挖掘,得到一些未知的,有价值的信息. 1.3数据 ...

  3. 记录 Docker 的学习过程 (网络篇之跨主机互通)

    下面从node3上操作node3# docker run -d -p 8500:8500 --name consul progrium/consul -server -bootstrap node3# ...

  4. BZOJ3680 JSOI2004 平衡点 - 随机/近似算法

    迭代乱搞了下就过了…… #include <bits/stdc++.h> using namespace std; ],y[],w[]; double xm,ym,wt,k,lambda= ...

  5. 二分-A - Cable master

    A - Cable master Inhabitants of the Wonderland have decided to hold a regional programming contest. ...

  6. jenkins pipline 如何禁止任务并行

    背景: 我测试的一个项目CI包括好几个步骤,但是有的步骤是不能并行的,否则会互相影响 处理过程: [方案一]:不推荐此方案 在每个步骤里面的shell脚本中加进程判断 示例:比如本任务有4个步骤,第2 ...

  7. ECMAScript基本语法——②注释

    单行注释://注释内容多行注释:/*注释内容*/

  8. NotePad++中如何改变光标样式(转换横着和竖着)?

    在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | )

  9. python2下解决json的unicode编码问题

    基础知识:   序列化——json.dumps()函数是将一个Python数据类型列表进行json格式的编码(可以这么理解,json.dumps()函数是将字典转化为json字符串)   反序列化—— ...

  10. 剑指offer系列——59/60.按之字形顺序打印二叉树/把二叉树打印成多行

    Q:请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. A:BFS,偶数层reverse vector&l ...