position

为了制作更多复杂的布局，我们需要讨论下position属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

• static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

.static {
    position: static;
}

static是默认值。任意position: static;的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

• relative元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

.relative1 {
  position: relative;
}

.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative1 的表现和static一样，除非你添加了一些额外的属性

在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom和left属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙

absolute元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)

absolute与fixed的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是static的元素。

.relative { // 父元素
  position: relative; 
  width: 600px;
  height: 400px;
}
.absolute { // 子元素
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

子元素是相对定位的。如果它的父元素是position: static;，子元素会跳过父元素直接相对于body元素定位。

换句话说就是 子元素要想使用 `absolute 进行绝对定位 那么它相对的那个元素postition必须relative，如果父元素没有relative的话 子元素会相对本身最近的一个有relative属性的元素进行定位

fixed元素框不再占有文档流位置，并且相对于视窗进行定位

<div class="footer"></div>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}

sticky(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位

相对于body定位并且是悬浮的

• floate

另一个布局中常用的CSS属性是float。Float 可用于实现文字环绕图片

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

• clear

clear属性被用于控制浮动。比较下面两个例子：

<div class="box">...</div>
<section>...</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

清除浮动

img {
  float: right;
}

.clearfix { //清除浮动
  overflow: auto;
}