ClearFix 是一种 CSS 技巧，可以在不添加新的 html 标签的前提下，解决让父元素包含浮动的子元素的问题。

自清除子元素浮动

div 布局的一个非常让新手头疼的问题就是，如果一个父元素中包含若干个子元素，那么当给所有的子元素都设置了浮动（float: left ）,那么父元素的高度就会为0。

例如：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
  • 如果子元素没有浮动，那么显示是这样的：
  • 但是一旦所有子元素都浮动了，那么父元素的高度变为0，就成了这样的恶心效果：

Margin Collapse 外边距重叠问题

外边距重叠也是一个很让人讨厌的问题。来描述一下症状。

container 之中包含一个 item 子元素，代码如下

<div class="container">
  <div class="item">
    item
  </div>
</div>

比如默认显示成这样：

这时，我给 item 加了 margin-top: 30px ，本来这时候我期待的结果是，item 块本身应该距离 container 青色区域的上边界 30px 。同时一个副作用是青色区域应该拉高 30px 。但是实际上得到的却是下面的效果：

解决方法如下： Html 中添加 clearfix 即给元素添加伪类，占用文档流

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
.clearfix
    display inline-block
    &::after
        content ''
        display block
        height 0
        line-height 0
        clear both
        visibility hidden