前端 CSS 经典：清除浮动

1. 利用伪元素clearfix来清除浮动

/* 给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的 */
.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
}

2. overflow方法的使用

/* 当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。*/
/*它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果 */
.clearfix{
    overflow: auto
}

3. 双伪元素方法的使用

/* 通过给父元素设置双伪元素来达到清除浮动的效果 */
.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  clear: both;
}