• 1. position 的值
• 2. 浮动及清除浮动

1. position 的值

• absolute: 生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
• fixed: 生成绝对定位的元素，通常相对于浏览器窗口进行定位。
• relative: 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static: 默认值，没有定位，元素出现在正常的流中。
• sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。

---

2. 浮动及清除浮动

• 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
• 浮动元素引起的问题：
  1. 父元素的高度无法被撑开，影响与父元素同级的元素。
  2. 与浮动元素同级的非浮动元素 (display:inline-xxx) 会跟随其后。
  3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
• 清除浮动：
  1. 使用空标签清除浮动。（在所有浮动标签后加一个空标签，定义clear: both，弊端是增加了无意义标签）
  2. 使用 overflow。（给包含浮动元素的父标签添加 css 属性overflow: auto / hidden; zoom: 1，其中zoom： 1用于兼容 IE6)
  3. 使用 after 伪元素清除浮动。（该方法只适用于非 IE 浏览器。需要注意的是需清除浮动的元素伪对象中设置height: 0，否则该元素会比实际高出若干像素）
     例子：
     .clearfix:after{content: '', display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block; } /* for IE/Mac */
  4. 浮动外部元素

---