清除浮动（伪元素）

文档结构

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

1.最新的清除浮动（block比table的优势在于不会造成两个container之间的margin塌陷）：

.container::after {
    content:"";
    display:block;
    clear:both;
}

2.最近的，被大家普遍接受的清除浮动：

.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both;
}
.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

当我们只针对现代浏览器时，可以使用如下（不支持IE6/7）

.container::after {
    content:"";
    display:table;
    clear:both;
}

3.使用overflow属性（当定位的content不在container的范围之外显示）

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* 元素要设置为block，从而使其环绕在content周围  */
}

//另一种方法
.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}