引言

布局是每一个前端工程师必备的技能。如何将页面元素以恰当的形式进行展现是前端的基础工作。本文介绍position和float属性在布局中应用。

定位（Position）

``

1、position默认值static；
2、相对定位position：relative，能够在正常布局流中将元素按照坐标进行相对移动，这的坐标（参数）是相对于默认位置
3、绝对定位position：absolute，将元素移除正常布局流，以坐标的形式相对于他的容器定位到页面的任何位置，而这里的坐标是参照祖先元素（如html）；
4、固定定位position：fixed，将元素从文档流移出，它的坐标相对于视口来计算；
5、粘性定位position：sticky，是静态定位于固定定位中和的一种方式。在正常布局流中滚动，直到出现在给他设定的阈值那里的时候，就固定了；

1、当父级和当前元素都是relative，margin合并（二者顶部对齐） 2、在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。比如子级元素相对于父级水平居中。

3、垂直居中。父级relative，子级absolute。

浮动（float）

Float 可用于实现文字环绕图片。float属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

p {
    display: block;
}

img {
    float: right;
    margin: 0 0 1em 1em;
}

可使用clear属性来清除浮动