通俗易懂的CSS布局display、position、float详解

前端开发就像盖房子，如果说 html 是构成房子的砖瓦， css 则是决定这些砖瓦的位置和对它们进行装饰。在实际开发中，前端在拿到设计稿后，都会先梳理页面的大致结构，构思完页面的布局后，再进行 coding。大多数网站都有着相似的布局，掌握这些“套路”便可以快速高效的完成开发工作。

display

display 是 css 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、inherit、none、flex。inherit 表示这个元素从父元素继承 display 属性值；none 表示这个元素不显示，也不占用空间位置；flex 是 flex 布局重要的属性设置，我们留到后面详细讲解，这边先介绍前面三个属性值。

每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 display 属性是 inline，我们通常称这类元素为行内元素，我们先通过下面的代码示例来看下两者的区别。

div布局结果

span布局结果

我们可以看到块级元素总是独占一行，从上到下显示，行内元素则是从左到右显示。这是因为块级元素前后有换行符，而行内元素前后没有换行符。除此之外，块级元素和行内元素还有其他的区别和特性。

块级元素：
没有设置宽度时，它的宽度是其容器的 100%；
可以给块级元素设置宽高、内边距、外边距等盒模型属性；
块级元素可以包含块级元素和行内元素；
常见的块级元素：<div>、<h1> ~ <h6>、<p>、<ul>、<ol>、<dl>、<table>、<address> <form> 等。

行内元素：
行内元素不会独占一行，只会占领自身宽高所需要的空间；
给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；
行内元素一般不可以包含块级元素，只能包含行内元素和文本；
常见的行内元素 <a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input> 等。

细心的你可能会发现，给 img 标签设置宽高是可以影响图片大小的，这是因为 img 是可替代元素，可替代元素具有内在的尺寸，所以宽高可以设定。

html 中的 input、button、textarea、select 都是可替代元素，这些元素即使是空的，浏览器也会根据其标签和属性来决定显示的内容。

给行内元素设置宽高不起作用，我们通过上面的代码已经感受到了，那为什么设置 margin、padding 只有左右起作用呢？我们来看下面的列子。

在 span 标签前后添加 div 标签在浏览器中的运行结果

在上图中可以明显看到 span 1 只添加了 margin-left 和 margin-right，但 margin-top、margin-bottom 均不起作用。虽然上下的 padding 看上去都起作用了，但是通过添加 div 标签，我们可以看到有重合的部分，所以 padding-top、padding-bottom 的设置从显示效果上是增加的，但对周围元素不会产生影响。

那 inline-block 又是什么呢？看命名方式，也能猜出大半，没错，设置为 inline-block 的元素，既具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性。我们给 div 标签设置 inline-block 属性看下效果。

将块级元素的 display 属性设置为 inline-block 后的效果

在上图中，我们没有设置 margin 值，但是 div 之间会有空隙，这是因为浏览器会将 html 中的换行符、制表符、空白符合并成空白符。

position(定位)

在布局中很重要的因素就是定位，position 属性就是用来定义元素的定位机制。position 的常用属性值有：

relative：相对定位，相对于元素的正常位置进行定位；
absolute：绝对定位，相对于除 static 定位以外的元素进行定位；
fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；
static：默认值，没有定位属性，元素正常出现在文档流中；
inherit：继承父元素的 position 属性值。

上文出现了文档流（normal flow）的概念，按理来说应该翻译成普通流，文档流是大多数人的叫法。“流”可以想象成流动的水，当我们打开屏幕，浏览网页，滚动鼠标，网页的内容就像是水流一样滑过。文档流便是指从上到下，从左往右的文档布局。当我们给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流，不再遵循从上到下，从左到右的规律了。

1、relative

position 为 relative 示例

从上图中我们不难发现，设置 position 为 relative，但是不添加额外属性（left，right，top，bottom 等），它表现的如同 static 一样，如 .box_1。属性 left，right，top，bottom 会使元素偏离正常位置，如 .box_2。元素的偏移会覆盖相邻元素，如 .box_3。

2、absolute

position 为 absolute 示例

absolute 会相对于最近的除 static 定位以外的元素进行定位，在使用时要注意设置父元素（或祖先元素）的 position 属性，若父元素（或祖先元素）都没有设置定位属性，absolute 会找到最上层即浏览器窗口，相对于它进行定位了。

3、fixed

position 为 fixed 示例

fixed 是相对于浏览器窗口的定位，一旦位置确定，元素位置也不会改变，不像 absolute，它的位置与父元素息息相关，父元素移动它也会跟着动。从上图我们可以看出，fixed 元素是脱离文档流的，之后的元素会“无视”它，不会给它腾出空间。

float(浮动)

float 属性定义元素在哪个方向浮动，常用属性值有 left、right，即向左浮动和向右浮动。设置了 float 的元素，会脱离文档流，然后向左或向右移动，直到碰到父容器的边界或者碰到另一个浮动元素。块级元素会忽略 float 元素，文本和行内元素却会环绕它，所以 float 最开始是用来实现文字环绕效果的。