使用float属性可实现图片环绕文字，通过设置float:left或right使文字沿图片排列，配合margin调整间距，避免拥挤；需用clear清除浮动防止布局错乱，并结合媒体查询实现响应式适配，在小屏设备中取消浮动以优化显示效果。
在CSS初级项目中，实现图片环绕文字是常见的排版需求。通过 float 属性可以轻松让图片靠左或靠右，文字自然围绕其排列。但要保证整体布局美观，还需合理设置 margin 与文本间距，避免内容拥挤。
使用 float 实现图片环绕
将图片设置为浮动元素后，文字会自动换行并沿其边缘排列。
常见做法：- 给图片添加 float: left; 或 float: right;
- 确保图片有明确的宽度，避免在小容器中溢出
- 文字内容放在图片之后的HTML结构中，便于自然环绕
示例代码：
img {
float: left;
width: 150px;
height: auto;
}
p {
/* 文字自动环绕 */
}
通过 margin 调整图文间距
仅使用 float 可能导致文字紧贴图片，影响可读性。添加 margin 可以控制图片与文字之间的距离。
立即学习“前端免费学习笔记（深入）”；
建议设置：- 在图片上设置 margin-right 和 margin-bottom，避免文字顶到图片下方内容
- 若图片靠右，则设置 margin-left
- 通常 10px–20px 的间距较为舒适
示例：
img {
float: left;
width: 150px;
margin-right: 15px;
margin-bottom: 10px;
}
防止后续元素错位：清除浮动
浮动可能影响后面的内容布局，比如下一个标题或段落跑到了图片旁边。使用 clear 属性可解决这个问题。
- 在需要“另起一行”的元素前添加 clear: both;
- 或使用 overflow: hidden; 在父容器上闭合浮动
例如：
.clear {
clear: both;
}
响应式考虑与兼容性
在小屏幕设备上，过大的浮动图片可能导致文字行宽过窄或布局错乱。
- 配合媒体查询调整图片尺寸或取消浮动
- 在手机端可设置 float: none; 让图片独占一行
示例响应式规则：
@media (max-width: 600px) {
img {
float: none;
width: 100%;
margin: 0 0 10px 0;
}
}
基本上就这些。掌握 float 与 margin 的配合，再注意清除和响应式处理，就能在初级项目中实现清晰、协调的图文混排效果。不复杂但容易忽略细节。
