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. 事务的ACID特性

    事务(Transaction)是并发控制的基本单位.    所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位.例如,银行转帐工作:从一个帐号扣款并使另一个帐号增 ...

  2. 【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记

    简介: 精灵是2D游戏里最重要的元素.游戏场景中大部分可见的元素都直接或间接地与精灵相关. 在Cococs2d-xz中,精灵使用Sprite表示,它将一张纹理的一部分或者全部的矩形区域绘制在屏幕上. ...

  3. linux 常用的酷炫命令

    1 命令行日常系快捷键 如下的快捷方式非常有用,能够极大的提升你的工作效率: CTRL + U -剪切光标前的内容 CTRL + K -剪切光标至行末的内容 CTRL + Y -粘贴 CTRL + E ...

  4. oracle审计详解-转

    http://blog.chinaunix.net/u2/66903/showart_2082884.htmlOracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这 ...

  5. [经验交流] Apache Mesos Docker集群初探

    前言 因工作需要,我对基于Apache Mesos 的 Docker 集群作了一点研究,并搭建了一套环境,以下是资料分享. 1. Apache Mesos概述 Apache Mesos是一款开源群集管 ...

  6. Discuz有关问题解决办法汇总

    1.Can not write to cache files, please check directory ./data/ and ./data/cache/ . 无法写入缓存 解决办法:在sour ...

  7. bootstrap-巨幕、缩略图、警告框

    巨幕: <div class="jumbotron"> <div class="container"> <h1>W3Scho ...

  8. Win32编程：窗口类样式+窗口外观样式+窗口显示样式

    1.窗口类样式WNDCLASS.style CS_VREDRAW 提供窗口位置变化事件和高度变化事件的处理程序,功能是重绘窗口 CS_HREDRAW 提供窗口位置变化事件和宽度变化事件的处理程序,功能 ...

  9. finder的隐藏文件&IOS虚拟机地址

    在终端里输入下面命令即可让它们显示出来. defaults write com.apple.finder AppleShowAllFiles -bool true   如果想恢复隐藏,可以用这个命令: ...

  10. yum install mysql

    rpm -qa|grep -i mysqlmysql-libs-5.1.52-1.1.alios6.1.x86_64mysql-5.1.52-1.1.alios6.1.x86_64mysql-deve ...