使用 float、inline-block 和 Flex 可实现图片文字混排：float 用于图文环绕，需注意清除浮动；inline-block 适合小图标与文字并排，可控制对齐；Flex 布局最推荐，灵活对齐且支持响应式，配合 gap 轻松控制间距。初学者应从 float 理解原理，逐步过渡到 Flex，同时注意图片默认行内间隙等细节处理。
在CSS初级项目中，实现图片和文字的混合布局是常见的需求，比如图文混排、新闻列表、产品介绍等场景。掌握几种基础但实用的布局方式，能快速完成整洁美观的效果。
使用 float 实现图文环绕
这是最经典的方法，适合让文字围绕图片排列。
说明： 给图片添加 float: left; 或 float: right;，文字内容会自动环绕到另一侧。
示例代码：
立即学习“前端免费学习笔记（深入）”；
<img src=”example.jpg” style=”float: left; width: 150px; margin-right: 10px;”>
<p>这里是围绕图片的文字内容……</p>
注意： 使用 float 后建议清除浮动，避免影响后续元素，可以用 overflow: hidden; 包裹父容器，或添加一个清浮动的元素。
使用 inline-block 实现并排布局
将图片和文字块都设置为 display: inline-block;，可以控制它们在同一行显示，并精确设置垂直对齐方式。
适用场景： 图标与标题、小卡片信息等。
关键样式：
- 给 img 和 span 设置 display: inline-block;
- 用 vertical-align: top/middle; 调整对齐
- 设置宽度或 max-width 防止图片撑出容器
使用 Flex 布局（推荐）
Flex 是现代布局的首选，灵活且易于控制对齐和间距。
基本结构：
<div style=”display: flex; align-items: flex-start; gap: 12px;”>
<img src=”icon.png” width=”80″>
<div><p>文字内容…</p></div>
</div>
优势：
- 自动对齐，无需计算高度
- 支持响应式，可配合 flex-wrap 使用
- gap 属性轻松控制间距
基本上就这些。初学者可以从 float 入手理解原理，逐步过渡到 Flex 布局，写出更清晰、易维护的代码。关键是多练习不同场景下的排版效果。不复杂但容易忽略细节，比如图片默认是行内元素会留空隙，记得处理。
以上就是css 排列 overflow 清除浮动 css Float display overflow margin flex