清除浮动的方式、原理及优缺点

1. 给父级 div 设置 height
   原理：父级 div 手动定义 height，解决了浮动元素脱离文档流，父元素无法获取高度的问题
   优点：代码简单易掌握
   缺点：只适用于高度固定的布局
2. 给父级 div 添加样式 overflow: auto
   原理：overflow: auto 会创建一个 BFC，计算高度时会将浮动元素计算进去
   优点：代码简单、浏览器支持性好
3. 在浮动元素末尾添加一个兄弟元素空 div 标签并设置样式 clear:both
   原理：添加一个空 div，利用 css 提供的 clear:both 清除浮动，让父元素自动获取高度
   优点：代码简单、浏览器支持性好
   缺点：添加无意义空标签，代码编写不友好，不方便后期维护
4. 【推荐】给父级 div 添加类名 clearfix，设置以下样式：

.clearfix::after{
	content:'';
	display:block;
	clear:both;
}
/* 兼容IE */
.clearfix{ zoom:1; }

原理：添加伪元素设置样式，等同于法三中的空 div，利用 clear:both 清除浮动
优点：使用方便、浏览器支持性好
缺点：样式代码较多