前言
当我们使用css浮动时会造成脱离文档流，造成高度塌陷等问题
以下是几种解决方法
一、前端清除浮动的几种方式
（1）、父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
（2）父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。
优点：简单、代码少、浏览器支持好
（3） 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
（4）设置伪类元素，定义clear：both属性
/*使用伪元素代替了html中的额外标签*/ <style> .clearfix::after { content: ""; display: block; clear: both; } </style> <body> <div class="head clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="box"></div> </body>
原理： 这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素
优点：代码少、兼容性好、不会有额外的标签、简单
缺点：为了兼容低版本的浏览器，需要加上zoom: 1这个属性
总结
以上就是四种解决浮动的方法了。
