清除浮动

使用伪元素清除浮动

第一种

.clearfix::after {
  /* 伪元素必写属性 */
  content: '';
  /* 被插入的盒子必须为块级 */
  display: block;
  /* 不看见这个元素 */
  height: 0;
  /* 清除浮动核心代码 */
  clear: both;
 /* 不看见这个元素 */
  visibility: hidden;
}

第二种

.clearfix::before, clearfix::after {
  content: '';
  /* 转换为块级元素并且在一行显示 */
  display: table;
}
.clearfix:after {
  clear: both;
}