使用float和margin可实现图文混排。将img设置为float:left或right使文字环绕，通过margin调整间距，避免文字贴边；为防止布局错乱，需用clear:both清除浮动，推荐使用.container::after伪类清除，确保父容器高度正常，布局稳定。
在网页设计中，图文混排是常见的布局需求，比如文章内容中图片居左或居右，文字环绕其周围。通过CSS中的 float 和 margin 属性，可以轻松实现这一效果。下面介绍具体方法和注意事项。
使用 float 实现图片浮动
将图片设置为浮动元素，可以让文字自动环绕在它的旁边。
常用方式：- float: left; 图片靠左，文字在右侧环绕
- float: right; 图片靠右，文字在左侧环绕
示例代码：
img {
float: left;
width: 150px;
height: 100px;
margin-right: 10px; /* 防止文字贴边 */
}
p {
/* 段落正常流式布局，会自动环绕图片 */
}
用 margin 控制图文间距
仅使用 float 可能使文字紧贴图片，影响阅读体验。通过设置 margin 可以控制图片与文字之间的距离。
立即学习“前端免费学习笔记（深入）”；
关键点：- margin-right：当图片左浮动时，给图片添加右边距，使文字不紧贴
- margin-left：当图片右浮动时，添加左边距，留出空间
- margin-top / margin-bottom：控制图片与上下内容的垂直间距
例如：
img {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}
清除浮动避免布局混乱
浮动元素脱离文档流，可能导致父容器高度塌陷或后续内容错位。使用 clear 属性可解决此问题。
- clear: both; 表示该元素两侧不允许有浮动元素
- 可在图文块结束后添加一个空元素并设置 clear，或使用伪类清除
推荐的清除方式（使用伪类）：
.container::after {
content: "";
display: table;
clear: both;
}
将此类容器包裹图文内容，确保布局稳定。
基本上就这些。合理使用 float 和 margin，配合 clear 清除浮动，就能实现整洁自然的图文混排效果。虽然现代布局更多使用 Flex 或 Grid，但在简单场景下，float 依然实用且兼容性好。
