主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
如果下面有其他内容，会顶上来，影响布局。
大盒子没有高度，内部元素浮动，脱离标准流后，大盒子原本的高度是（内部元素撑开），所以内部元素浮动后，就高度为0，变成一条线，下面有标准流的元素就会顶上来。
解决方案：
（1）额外标签法 （给最后一个浮动标签后放置一个空元素：添加clear:both;）
效果预览⬇️
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。
（2）父级添加overflow：hidden
效果预览⬇️
原理：通过触发BFC方式，实现清除浮动
BFC指路：理解BFC
优点：代码简洁。（不推荐使用）
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
（3）使用after伪元素
代码块⬇️
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
效果预览⬇️
优点：符合闭合浮动思想，结构语义化正确。（推荐使用）
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。
（4）使用before和after双伪元素清除浮动
效果预览⬇️
/* 完整版本: *
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点：代码更简洁。（推荐使用）
缺点：用zoom:1触发hasLayout。
