# 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. 浮动外部元素