父元素的高度为0利用伪元素:after清除浮动可解决问题

当一个元素的子元素都被设置成浮动元素时，会导致该元素高度塌陷（高度为0），从而无法正常显示。解决这种问题的一种方式是利用CSS的伪元素:after来清除浮动。

当一个元素的子元素都被设置成浮动元素时，会导致该元素高度塌陷（高度为0），从而无法正常显示。解决这种问题的一种方式是利用CSS的伪元素:after来清除浮动。

具体步骤如下：

1. 在CSS中找到对应的父元素，并设置其position值为relative或者absolute（这是在使用伪元素:after时必须的步骤）；

2. 使用:after伪元素，在该父元素的最后面添加一个“假”的元素，并将该元素的clear属性设置为both（即清除浮动），同时设置其display属性为block，并给其添加content属性，如下代码所示：

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

1. 将需要清除浮动的子元素添加一个clearfix的class类名，即可完成清除浮动的操作。该clearfix类名可以在CSS中设置，如下：

.clearfix {
  zoom: 1;
}

其中，在IE6和IE7下，需要添加“zoom: 1;”属性，来使该class生效。

示例1：

HTML代码如下：

<div class="header clearfix">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
    </ul>
  </div>
</div>

CSS代码如下：

.header {
  position: relative;
}

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

.clearfix {
  zoom: 1;
}

.logo {
  float: left;
  width: 200px;
  height: 50px;
  background-color: #f00;
}

.nav {
  float: right;
  width: 500px;
  height: 50px;
  background-color: #ff0;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  float: left;
  margin: 0 10px;
}

.nav li a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
}

在该示例中，对应的父元素为class为header的div元素，通过在该元素上添加:after伪元素，并设置其clear属性为both，来清除子元素的浮动状态。同时，为需要清除浮动的子元素添加了clearfix类名，通过zoom属性使其在IE6和IE7下正常工作。

示例2：

HTML代码如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码如下：

.container {
  position: relative;
}

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

.clearfix {
  zoom: 1;
}

.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.right {
  float: right;
  width: 200px;
  height: 200px;
  background-color: #ff0;
}

在该示例中，对应的父元素为class为container的div元素，同样通过在该元素上添加:after伪元素，并设置其clear属性为both，来清除子元素的浮动状态。同时，为需要清除浮动的子元素添加了clearfix类名。