使用float和margin可实现图文混排。将img设置为float:left或right使文字环绕，通过margin调整间距，避免文字贴边；为防止布局错乱，需用clear:both清除浮动，推荐使用.container::after伪类清除，确保父容器高度正常，布局稳定。
在网页设计中，图文混排是常见的布局需求，比如文章内容中图片居左或居右，文字环绕其周围。通过CSS中的 float 和 margin 属性，可以轻松实现这一效果。下面介绍具体方法和注意事项。
将图片设置为浮动元素，可以让文字自动环绕在它的旁边。
常用方式：示例代码：
img {
float: left;
width: 150px;
height: 100px;
margin-right: 10px; /* 防止文字贴边 */
}
p {
/* 段落正常流式布局，会自动环绕图片 */
}
仅使用 float 可能使文字紧贴图片，影响阅读体验。通过设置 margin 可以控制图片与文字之间的距离。
立即学习“前端免费学习笔记（深入）”；
关键点：例如：
img {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}
浮动元素脱离文档流，可能导致父容器高度塌陷或后续内容错位。使用 clear 属性可解决此问题。
推荐的清除方式（使用伪类）：
.container::after {
content: "";
display: table;
clear: both;
}
将此类容器包裹图文内容，确保布局稳定。
基本上就这些。合理使用 float 和 margin，配合 clear 清除浮动，就能实现整洁自然的图文混排效果。虽然现代布局更多使用 Flex 或 Grid，但在简单场景下，float 依然实用且兼容性好。
以上就是如何在CSS中制作图文混排_float与margin控制图片和文字的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
