浮动----会使当前标签产生上浮效果，从而导致父标签高度塌陷的问题
1. 给父元素指定高度
立即学习“前端免费学习笔记（深入）”；
简单粗暴！高度不定时，如果内部高度大于父级时，容易产生问题
2. 在浮动元素后边添加额外标签
立即学习“前端免费学习笔记（深入）”；
其他
标签也可以
会产生空标签，导致代码混乱，不易维护，且代码的直观感觉很不好
3. 给父标签添加 overflow:hidden;zoom:1 或者 overflow:hidden;width:98% 样式
立即学习“前端免费学习笔记（深入）”；
添加 zoom:1 是为了兼容IE6，zoom 和 width 二者必有一个，但是不能设置height值，浏览器能够自动获取浮动区域高度，
且不能与position一同使用，因为会引起超出尺寸的隐藏问题。
4. 给父标签设置 overflow:auto
立即学习“前端免费学习笔记（深入）”；
与 3 基本相同，只引起的问题是若内部高度高出父级时会出现滚轴
5. 给父元素添加浮动，大家一起变成一个整体的浮动块
立即学习“前端免费学习笔记（深入）”；
会引起新的浮动问题
6. 给父标签添加 display:table
立即学习“前端免费学习笔记（深入）”；
父级div属性变成表格，可能会引起其他位置问题
7. 给父标签添加绝对定位
立即学习“前端免费学习笔记（深入）”；
与 5 原理相通，都是将父元素脱离原始文本流，导致的问题也可能相似，可依旧使用该方法予以解决
8. 给父标签定义伪类 :after ，和zoom:1
.clearfix:after {display:block; clear:both; content:""; visibility:hidden; height:0}
.clearfix {zoom:1}
立即学习“前端免费学习笔记（深入）”；
IE8以上和非IE浏览器才支持:after，zoom:1可解决浏览器兼容问题
以上就是CSS清浮动有哪些方法？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
