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. LintCode Search For a Range (Binary Search)

    Binary Search模板: mid 和 target 指针比较,left/ right 和 target 比较. 循环终止条件: 最后剩两数比较(while(left + 1 < righ ...

  2. WPA破解原理简要——无线网络破解续

    一.破解密码的基础 关于密码的破解我再重复一次好了.密码破解就两大类方法.一是字典解密,而是暴力解密. 暴力解密就是采用穷举的方法——你密码是怎么组成的呢?无非就是数字.字母.符号,暴力解密就是采用一 ...

  3. 学习SQL的点点滴滴（三）-修改数据库的兼容级别

    语法 ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = { 80 | 90 | 100 } 参数 database_name 要修改的数据库 ...

  4. [网络] 用 OpenVPN 实现站对站 VPN 服务

    一.简介 一般情况下站对站 VPN 是用 cisco.juniper.h3c等品牌的专业设备实现的,这些设备性能可靠,价格较贵. 如果现有设备不支持,而且不能用新设备替换,或者部门预算有限,那么只能用 ...

  5. SQL Server 2012 配置数据库邮件

    发送和接受邮箱不能用QQ邮箱,可以用163网易邮箱,同时要求要发送邮件的计算机能上外网 查看163网易邮箱的发送和接收服务器的方法如下 在数据库的管理中,右击数据库邮件,选择配置数据库邮件 出现对话框 ...

  6. Python 列表

    python 列表 列表的特点 1.列表是一种可变的数据类型,这点是跟元组有区别的 2.列表中的值是有序的,并且可存放重复的值,这点跟set有区别的 3.python中的列表类似于其它语言中的数组 4 ...

  7. 【学】CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

    首先要说一下,transition属性ie9是不支持的,从ie10才开始支持 例子是当鼠标移上div后,它会旋转180度. 要点: 用圆角制作圆形盒子,border-radius设置成50%: 用bo ...

  8. ADF_Controller系列4_通过创建ADF Menu作为页面向导（Part2）

    2015-02-15 Created By BaoXinjian

  9. NeHe OpenGL教程 第四十五课：顶点缓存

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  10. 【转】贾扬清：希望Caffe成为深度学习领域的Hadoop

    [转:http://www.csdn.net/article/2015-07-07/2825150] 在深度学习(Deep Learning)的热潮下,Caffe作为一个高效.实用的深度学习框架受到了 ...