css hack之清除浮动(clearfix)

清除浮动（clearfix）是CSS hack技术中的一种，它主要用于清除父级容器元素中子级浮动元素带来的影响，以避免出现莫名其妙的问题。下面是完整的清除浮动攻略。

什么是清除浮动（clearfix）？

清除浮动是在一个容器里包含了浮动元素后，为了让父级元素能够自适应子元素高度而产生的一种CSS hack技术。在不清除浮动的情况下，容器无法识别浮动元素的高度，因而不能正确地包含浮动元素。

如何实现清除浮动（clearfix）？

具体实现方式有多种，下面列举其中几种。

1. 通过CSS伪元素

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

这种方式是通过给父级容器的伪元素后面添加一个空元素，并使用清除属性（clear:both）让元素包含自身浮动的内容。其中，content属性必须添加，否则伪元素将不会生效。

2. 通过overflow属性

.clearfix {
    overflow: auto;
    zoom: 1;
}

这种方式是通过设置父级元素的overflow属性来清除浮动，当overflow属性值为auto或hidden时，可以让元素包含自身浮动的元素。同时，由于在IE6-7浏览器中overflow属性不会被继承，需要添加Zoom hack，以兼容IE浏览器。

示例说明

下面通过两个示例来演示如何使用清除浮动。

示例一

<div class="clearfix">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.left {
  float: left;
  width: 50%;
  background-color: #ccc;
}
.right {
  float: right;
  width: 50%;
  background-color: #eee;
}

在这个例子中，我们给父级元素添加了clearfix类，同时使用了清除浮动的第一种方式。这样就清除了子元素浮动造成的影响，使得父元素高度自适应。

示例二

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

#container {
  overflow: auto;
  zoom: 1;
  background-color: #eee;
}
.item {
  float: left;
  width: 33.33%;
  height: 100px;
  background-color: #ccc;
}

在这个例子中，我们同样使用了清除浮动方式的第二种方法，通过设置父级元素的overflow属性来清除子元素浮动造成的影响。这样就能够正确地自适应容器的高度。