清除浮动的几种方式

Posted 2021-02-08 tanchangsha

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，让人感觉很不好