position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。

float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。

inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

作者:Ivony
链接:http://www.zhihu.com/question/20821569/answer/16294014
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

position:absolute、float、display:inline-block 区别的更多相关文章

  1. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

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

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

  4. 前端之旅HTML与CSS篇之block与inline的区别

    display:block;和display:inline;的区别block元素特点: 1)处于常规流中时,如果width没有设置,会自动填充满父容器 2)可以应用margin/padding 3)在 ...

  5. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  6. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

  7. position与float

    position:fixed/absolute和float的关系:元素设置position:absolute / fixed后,float属性是没有效果的.对于position: absolute元素 ...

  8. 关于display的属性:block和inline-block以及inline的区别,float相关说明

    首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符:而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果 ...

  9. position:absolute和float会隐式的改变display类型

    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...

随机推荐

  1. 初学Html

    HTML,超文本标记语言,文本解释性语言,它的源代码不通过编译而直接在浏览器中运行时被翻译,其决定的是网页的结构和内容. 一谈html,自然首先是浏览器,比较具有代表性的浏览器则是谷歌.火狐.IE.苹 ...

  2. 导航position:absolute

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. truncate有外键约束的表,报ORA-02266处理。

    问题描述:当父表有子表的外键约束时,无法直接truncate父表.报ORA-02266: unique/primary keys in table referenced by enabled fore ...

  4. Symfony2创建基于域名的路由(原创翻译)

    你可以匹配将要来到的请求以HTTP域名的方式 YAML方式 mobile_homepage: path: / host: m.example.com defaults: { _controller: ...

  5. hadoop实战之分布式模式

    环境 192.168.1.101 host101 192.168.1.102 host102 1.安装配置host101 [root@host101 ~]# cat /etc/hosts |grep ...

  6. ES6转换为ES5

    1.静态函数 1.什么是静态函数 静态函数最重要的就是不用创建一个实例变量就可以进行调用,在C++里面,无法访问this对象, 而在JS里面由于js的this对象支持,是可以访问this对象,只是th ...

  7. 如何修改SVN已提交项目的message log

    直接在TortoiseSVN中修改过往日志,会提示: DAV request failed;it's possible that the repository's pre-revprop-change ...

  8. ADF_Controller系列2_绑定TasksFlow、Region和Routers(Part2)

    2015-02-14 Created By BaoXinjian

  9. sql 数据量高并发的数据库优化(转)

    Mysql 大数据量高并发的数据库优化 一.数据库结构的设计 如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实 ...

  10. 3、Linux 获取帮助的方法-关机命令-7个系统启动级别

    1.获取帮助的方法: (1).命令 -h 或--help (2).man man 命令  --->/user 查看user选项 /选项 ---->n 查看下一项 2.关机命令 (1).sh ...