float实现图文混排需设置浮动、外边距并清除浮动，否则父容器塌陷且后续布局错乱；响应式下推荐改用flex或grid布局。
float 会让图片脱离文档流，文字自动绕排
给 float: left 或 float: right 后，图片会向左或右“飘”起来，后续的段落文字会沿着图片的另一侧流动。这是最基础的图文混排方式，兼容性极好（IE6 都支持），但要注意它带来的副作用：
- 父容器高度塌陷：如果父元素没有其他内容或清除浮动，它的高度会变成 0
- 后续块级元素可能被“带偏”：比如下一个 会从文字结束处开始，而不是从新行顶部开始
float元素本身不再参与父容器的高度计算用 margin 控制图片与文字的距离
margin是调整图文间距最直接的方式，但它必须作用在float元素上才有效果（因为非浮动图片是块级元素，默认独占一行，margin对绕排没影响）：-
margin-right控制图片右侧留白，影响文字离图距离（左浮动时常用） -
margin-bottom可防止下一段文字紧贴图片底部（尤其当图片比文字行高低时） - 避免只设
margin-left或margin-top：它们通常不改变绕排效果，只是把图“推远”，可能造成空白错位 - 推荐组合：
float: left; margin-right: 12px; margin-bottom: 8px;
必须清除浮动，否则布局会乱
不清除浮动，父容器无法包裹图片，后面的内容大概率会挤到错误位置。常见做法有：
- 在父容器末尾加一个空标签：
- 给父容器设置
overflow: hidden或overflow: auto（简单但可能意外裁剪阴影或下拉菜单） - 使用伪元素清除（更现代）：
parent::after { content: ""; display: table; clear: both; }
float 混排在响应式场景下容易失效
当屏幕变窄、文字换行增多时，
float图片可能被“挤”到文字下方，尤其是图片宽度固定而容器缩小时。这不是 bug，而是 float 的行为本质——它只保证“首行绕排”，不控制后续行的对齐。立即学习“前端免费学习笔记（深入）”；
- 小屏下建议改用
display: flex或display: grid+align-self替代 - 如果必须保留 float，请配合
max-width: 100%和height: auto让图片可缩放 - 注意：移动端 Safari 对
float+margin在某些字体大小下存在微小渲染偏移，测试时别只看桌面
