CSS: 清除浮动

为什么要清除浮动

虽然说现在 9102 年了应该不会再有人用 float 了，但是有些老网页还是会有 float 来布局的。float 带来的主要问题是高度坍塌。如：

<div class="parent">
  <div class="children"></div>
</div>

在子元素设置了 float 后，父元素的高度就没了。

.parent {
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

结果：

父元素的高度为0

主要的原因是因为设置了 float 之后，子元素就脱离文档流，也就相当于浮在父元素上了，从二维变到了三维。父元素里面就中空了，高度也为0了，不再是子元素高度。

解决方法一般有两个。

overflow

最简单但是会带有副作用的方法是在父元素上添加一个 overflow:hidden 就可以了。

.parent {
  overflow: hidden;
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

结果：

父元素高度回来了

但是如果代码多了，每个地方都要加这一句很麻烦，而且有可能父元素 oveflow:hidden 和别的样式冲突就麻烦了。

clearfix

我们可以使用另一个方法，也是推荐的方法。首先定义一个 .clearfix 的类

 .clearfix::after{
    content: ''; 
    display: block; 
    clear:both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容 */
 }

然后将这个类添加到父元素上就可以了。

<div class="parent clearfix">
  <div class="children"></div>
</div>

这样的副作用基本是没有的，而且只需要在父元素上添加 class 类就好了，更方便。