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