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. oracle数据库--启动和关闭

    oracle--启动 oracle数据库的启动过程包含3个步骤:启动实例->加载数据库->打开数据库 分步骤启动过程可以对数据库进行不同的维护操作,对应我们不同的需求. 启动模式: 1.s ...

  2. C++ Primer : 第十三章 : 动态内存管理类

    /* StrVec.h */ #ifndef _STRVEC_H_ #define _STRVEC_H_ #include <memory> #include <string> ...

  3. 正向代理与反向代理的区别【Nginx读书笔记】

    正向代理的概念 正向代理,也就是传说中的代理,他的工作原理就像一个跳板, 简单的说, 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器 这个代理服务器呢,他能访问那个我不能访问的网站 于是我 ...

  4. MySQL管理_数据库常用命令

    1.数据库赋权 进入mysql数据库: mysql> use mysql; 给root用户设置新密码: mysql> update user set password=password(& ...

  5. c#检测端口是否被占用

    当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 . 但是本机一个端口只能一个程序监听,所以我们进行本地监听的时候需要检测端口是否被 ...

  6. 大师教你<部落冲突>如何切换账号

    前提申请两个谷歌账号,账号一和账号二,想要切换账号,只需清除部落冲突在手机上的数据即可.详情请看下文! 1. 第一次登陆,进入游戏后 2. 没有谷歌商店的童鞋,下载谷歌安装器(一键修复)以及VPNFQ ...

  7. 【freemaker】之自定义指令通用select模版

    测试代码 @Test public void test08(){ List<Group> groups=Arrays.asList(new Group(1,"山口组") ...

  8. CRM 2016 subgrid 的显示隐藏

    function OnLoad() { //这里隐藏添加子记录的(+) 号按钮 hide_add_btn(); //这里隐藏鼠标在子记录上时的(删除)按钮 hide_del_btn(); //这里处理 ...

  9. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  10. Angular学习

    一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...