CSS定位

普通流

每个块级元素都换行显示，以至于页面中的每个项目都显示在前一个项目的下面，即使制定了盒子的宽度，并且也有足够的空间让两个元素并排显示，它们也不会出现在一行。（段落一个接一个垂直向下排列）

---

相对定位

相对定位将一个元素从它在普通流中所处的位置上移动，在它原来的位置向上、向下、向左、向右移动。这种移动不会影响周围元素的位置，他们还是位于在普通流中所处的位置。

---

绝对定位

绝对定位的元素的位置相对于它的包含元素。它完全脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉他所占据的空间）。使用绝对定位的元素随着页面的滚动而移动。
就像是一直放在页面可见区的床帘一样，可能会覆盖一部分正文。

---

固定定位

固定定位是绝对定位的一种形式，与相对于包含元素定位不同，它是将元素相对于浏览器窗口进行定位。固定定位的元素不会影响周围元素的位置，而且当页面上下滚动时，它不会移动。
固定定位是元素相对于浏览器窗口进行定位。因此，当用户滚动页面时，这类元素的位置保持不变，始终位于浏览器窗口的固定位置

---

浮动元素

浮动一个元素可以让其脱离普通流，并定位到其包含盒子的最左边或最右边的位置。这个浮动的元素会成为一个周围可以浮动其他内容的块级元素。
float元素允许你将普通流中的元素在它的包含元素内尽可能地向左或向右排列。位于包含元素中的其他内容会在浮动元素的周围流动。

---

注意

任何元素从普通流脱离时，盒子都会产生重叠。可以使用z-index属性来控制将哪个盒子显示在上层。

---

细节

1. 普通流：position：static。
2. 相对定位：position：relative。
3. 绝对定位：position：absolute。
4. 固定定位：position：fixed。
5. 浮动定位：position：float。
6. 清除浮动：clear:left/right/both/none。
7. 利用浮动创建多列式布局：width、float、margin（在列之间创建空隙）。

---