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. input屏蔽历史记录

    设置input 的扩展属性 autocomplete为off即可 <input type="text" autocomplete="off" />

  2. MapReduce介绍

    一.MapReduce模型 1.MapReduce是大规模数据(TB级)计算的利器,Map和Reduce是它的主要思想,来源于函数式编程语言. 2.Map负责将数据打散,Reduce负责对数据进行聚集 ...

  3. @proprety数组字典字符串用copy和strong区别（深浅拷贝）

    ////  @proprety数组字典字符串用copy和strong区别(深浅拷贝).h//  IOS笔记//// /* _proprety________copy_strong_________h ...

  4. Qt 手动添加ui文件到工程（转）

    制作ui文件 先应该用Qt Designer绘制一个自己的界面,并存为myform.ui(这里的myform可以用自己喜欢的名字代替).在制作自己的界面文件时要注意以下几个要点: 1.要记住ui文件的 ...

  5. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

  6. Windows环境下使用Redis缓存工具的图文详细方法

    一.简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合). ...

  7. SVD分解的理解[转载]

    http://www.bfcat.com/index.php/2012/03/svd-tutorial/ SVD分解(奇异值分解),本应是本科生就掌握的方法,然而却经常被忽视.实际上,SVD分解不但很 ...

  8. 【转】前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  9. 快速求n的质因子(数论)

    快速求n的质因子 如何尽快地求出n的质因子呢?我们这里又涉及两个好的算法了! 第一个:用于每次只能求出一个数的质因子,适用于题目中给的n的个数不是很多,但是n又特别大的 #include<std ...

  10. 开源是一种态度、分享是一种精神 — FirApi发布、WeiXinApi更新

    在云计算盛行的年代,接触开发式的平台必不可少,因项目累积的代码也不少,之前本着"重复的事情自己做一次就够了,不需要其他人在重复为此工作."的想法发布了WeiXinApi.Boots ...