清除浮动（伪元素）

文档结构

<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 */}