如果子元素浮动了，假设父元素不给高度,父元素的高度为0;此时子元素不能撑开标准流的块级父元素,

原因:子元素浮动后脱标 → 不占位置

目的:需要父元素有高度,从而不影响其它网页的布局 清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题

1.额外标签法

给谁清除浮动，就在其后额外添加一个空白标签，给其设置clear：both。

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。

#clear{
    clear: both;
}

2.给父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

.parent{
    overflow: hidden;
}

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{ 
    *zoom: 1;/*兼容IE*/
}

.clearfix:after{
   content: "";
   height:0;
   line-height:0;
   display: block;
   visibility: hidden;
   clear: both;
}
.clearfix{
    zoom: 1;
}

缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。

优点: 简单粗暴直接有效，清除了浮动带来的影响。