清除浮动的方式有哪些？#

1. 直接设置浮动父元素的高度#

优点：简单粗暴、方便

缺点：有些布局中不能固定父元素高度。如：新闻模块

2. 额外标签法#

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear:both。clear清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样{clear:both;height:0;overflow:hidden;}

缺点：会在页面中添加额外的标签，会让页面的html结构变得复杂

3. 单伪元素清除法#

用伪元素替代了额外的标签

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

.clearfix {
  *zoom: 1;

  &::after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }
}

缺点：项目中使用，直接给标签加类即可清除浮动

5. 给父元素设置overflow：hidden#

直接给父元素设置overflow：hidden

优点：方便