使用伪类after清除浮动，通过添加clearfix类实现父容器高度自适应；2. 设置父容器overflow:hidden或auto触发BFC包含浮动；3. 采用display:flow-root创建BFC，现代浏览器推荐方案；4. 避免使用额外clear元素。建议优先选择::after或flow-root方法。
当子元素设置了浮动（float）后，父容器往往无法正确包裹它们，导致高度塌陷。解决这个问题需要清除浮动，让父容器能正确计算高度。以下是几种常用且有效的方法。
这是最推荐的做法，通过在父容器上添加一个伪元素来清除内部浮动。
CSS 示例：给父容器加上 clearfix 类，即可自动撑起高度。
通过触发 BFC（块级格式化上下文），使父元素包含浮动元素。
立即学习“前端免费学习笔记（深入）”；
.parent {这种方法简单，但要注意 overflow: hidden 可能会裁剪内容，比如弹出的下拉菜单或阴影效果。
现代浏览器支持的新方法，能创建新的块级格式化上下文，自动包含子元素，包括浮动元素。
.parent {无需额外标签或伪元素，语义清晰，是目前最干净的解决方案，适合现代项目。
在浮动元素最后添加一个带 clear 属性的空标签。
<div style="clear: both;"></div>虽然有效，但破坏了结构与样式的分离原则，增加无意义的 DOM 节点，应避免使用。
基本上就这些方法。日常开发中建议使用 ::after 伪元素 或 display: flow-root，既有效又符合现代标准。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
685
收藏
