解释clearfix

我经常在阅读别人的网页代码时，看到人们为HTML标签（尤指包含了子标签的父标签）添加clearfix类，并在CSS样式中写下如下这样的代码。

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

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

.clearfix{
    overflow: auto;
}

这是为什么呢？初学CSS时，我非常的疑惑。

答案也很简单，为了清除浮动。

在CSS3未出世前，前端工程师除了使用默认就有的flow规则，还使用float布局，

即

1. 通过CSS给子元素设定float和width属性

2. 编写clearfix类的CSS代码, 然后在HTML中为父元素添加clearfix类。

// 一份常见的clearfix代码
.clearfix::after {
    content:"";
    display:block;
    clear:both;
}

案例：
尝试如下代码，你通过添加和移除父元素的clearfix类来决定是否清除浮动，
尝试过后，你会发现清除浮动前，父元素的高度为0。
清除浮动后，父元素的高度就被子元素撑起来了！

<div class="parent clearfix">
    <div class="child">Child</div>
    <div class="child">Child</div>
    <div class="child">Child</div>
</div>

.child{
  border: 1px solid red;
  width: 100px;
  float: left;
}

.parent{
  border: 1px solid green;
}

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

你可以通过直观的现象去记忆理解，也可以看看下面的解释。

不是人话的原理解释

父元素内部的元素始终遵循flow布局的规则。

::after含义：父元素内部会出现一个元素，且该元素始终为父元素内部最后的一个元素。

当内部子元素全部添加float属性后，将不参与父元素的高度计算，父元素高度即为剩余元素的高度总和。所以，此时父元素的高度为0;

当添加clearfix代码后, 最后一个块状元素便让它之前的元素清除了浮动(它不会被浮动元素覆盖)，使得之前添加了float属性浮动的元素同最后一个元素一起重新参与到父元素的高度计算, 页面上的效果就是父元素重新包含了子元素。

理解要点就是:

• 伪元素的理解
• clear属性的效果
• 把握住清除浮动前后父元素的高度计算。

等效代码

贴到JsBin展示一下吧。

<div class="parent clearfix">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>
<br>

<div class="parent">
  <div class="child">Child4</div>
  <div class="child">Child5</div>
  <div class="child">Child6</div>
  <span class="after"></span>
</div>

.child{
  border: 1px solid red;
  width: 100px;
  float: left;
}

.parent{
  border: 1px solid green;
}

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

.after{
  /*clear:left; clear:right;*/
  clear:both;

  /* 在块级元素上，clear属性才生效 */
  display:block; 

  /*
  width:10px;
  height:10px;
  background-color:black;
  */

  content:'';
}