清除浮动的方法 1.父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 缺点：在浮动元素高度不确定的时候不适用。
2.结尾处加空div标签 clear:both 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。 缺点：如果页面浮动布局多，就要增加很多空div，会增加代码的冗余量。
3.父级div定义双伪类和 zoom（主流方法，推荐使用） 原理：利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，区别在于:clear在html插入一个div.clear标签，会增加代码冗余量，而此法利用伪类clear:after在元素内部增加一个类似于div.clear。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } </style> </head> <body> </body> <div class="clearfix"></div> </html>