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. Win10安装2 —— 版本的选择与下载

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12368795.html 一:各个版本的区别 1.Windows10 Home(家 ...

  2. vjudge 最大公约数GCD 直接求最大共约束和最小公倍数的指令

    原题链接https://vjudge.net/contest/331993#problem/C 输入2个正整数A,B,求A与B的最大公约数. Input2个数A,B,中间用空格隔开.(1<= A ...

  3. RabbitMQ+PHP教程

    RabbitMQ+PHP 教程一(Hello World) RabbitMQ+PHP 教程二(Work Queues) RabbitMQ+PHP 教程三(Publish/Subscribe) Rabb ...

  4. 从零DIY机械键盘/主控方案

    自从有了第一套机械键盘,先后修改了接口方案,安装了LED灯等,但是始终无法满足自己的DIY欲望. 于是想到最简单的方法就是用现成的主控,而主控来源于废弃的键盘,如下图: 这种主控也是矩阵方式,只需要测 ...

  5. Python读取Excel,日期列读出来是数字的处理

    Python读取Excel,里面如果是日期,直接读出来是float类型,无法直接使用. 通过判断读取表格的数据类型ctype,进一步处理. 返回的单元格内容的类型有5种: ctype: 0 empty ...

  6. Selenium原理

      from selenium import webdriver:导入webdriver模块 当导入webdriver模块时,会执行\selenium\webdriver目录下的__init__.py ...

  7. Pycharm常用快捷捷捷啊键= =

    超多快捷键的其实,懒得都记住(主要是记不住……) 这里记录一下自己觉得用了确实会很省事的,特别是当你没有鼠标的时候 = = 超常用的 Ctrl + /  注释该行 Ctrl + D  复制该行到下一行 ...

  8. Java自学-Lambda 概念

    Java Lambda 表达式概念 假设一个情景: 找出满足条件的Hero 从使用普通方法,匿名类,以及Lambda这几种方式,逐渐的引入Lambda的概念 步骤 1 : 普通方法 使用一个普通方法, ...

  9. poj1321棋盘问题(dfs+摆放问题)

    在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放方案C. ...

  10. 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统

    介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...