文字与图片重叠是因为浮动元素脱离文档流，后续内容会环绕其排列；使用 clear: both 可清除浮动影响，使元素两侧不出现浮动对象，从而避免布局错位。
当网页中的图片或其他元素使用浮动（float）时，常会导致文本环绕其周围。虽然这种布局在某些场景下很实用，但若未正确处理，容易造成后续内容错位甚至重叠。为解决此类问题，CSS 提供了 clear 属性来清除浮动影响，确保页面结构清晰。
当一个元素设置了 float: left 或 float: right，它会脱离正常文档流，后面的文本会围绕在其左侧或右侧显示。如果不清除浮动，后续块级元素可能会上移，与浮动元素发生重叠。
例如：一张左浮动的图片后紧跟一段文字，文字会自然环绕图片。但如果希望某部分内容从新的一行开始、不与图片并列，就必须清除浮动的影响。
clear 属性用于指定一个元素的哪一侧不允许出现浮动元素。常用取值包括：
立即学习“前端免费学习笔记（深入）”；
在需要清除浮动的元素上添加 clear: both，即可让该元素从新的一行开始渲染，避免与前面的浮动内容重叠。
以下是一个典型场景：
@@##@@ <p>这是一段环绕图片的文字内容……</p> <div style="clear: both;"></div>
在这个例子中， 也可以将这个清浮动的 div 写成类，在 CSS 中复用： 然后在 HTML 中使用： 虽然 clear 方法简单有效，但在复杂布局中更推荐使用其他方式控制浮动影响，比如： 但对于简单的图文混排场景，clear: both 依然是快速解决问题的有效手段。 基本上就这些，掌握 clear 的用法能帮你快速修复因浮动导致的内容重叠问题。
.clearfix {
clear: both;
}
现代替代方案（补充说明）
以上就是如何在CSS中清除浮动解决文字与图片重叠问题_clear方法应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
960
收藏
