使用float属性可实现图文混排，如float:left使图片左浮动、文字环绕右侧。通过设置宽高、边距及清除浮动，确保布局美观与结构完整，适用于新闻类页面布局。
在网页布局中，图文混排是一种常见需求，比如文章内容中图片居左或居右，文字环绕其周围。实现这种效果，CSS 的 float 属性是最经典且实用的方法之一。本文通过一个实战案例，带你掌握如何使用浮动实现图文混排。
理解 float 的基本原理
float 属性允许元素脱离正常文档流，并向左或向右“浮动”，其他内容会围绕它排列。常用于图像与文本的混合布局。
常用取值：
- float: left; — 元素靠左浮动，文本在其右侧和下方环绕
- float: right; — 元素靠右浮动，文本在其左侧和下方环绕
- float: none; — 默认值，不浮动
实战：实现左侧图片右侧文字环绕
假设我们要在一个新闻类页面中插入一张图片，文字内容自然环绕在右侧和下方。
立即学习“前端免费学习笔记（深入）”；
<div class="article"> <img src="example.jpg" alt="示例图片" class="float-left"> <p>这里是第一段文字内容……</p> <p>这里是第二段文字内容……</p> </div>
CSS 样式如下：
.float-left {
float: left;
width: 150px;
height: 150px;
margin: 0 15px 10px 0;
border: 1px solid #ddd;
border-radius: 8px;
}
.article {
width: 600px;
line-height: 1.6;
font-size: 16px;
}
说明：
- 图片设置 float: left 后，段落文字会自动环绕到右侧
- margin 设置右侧和底部边距，避免文字贴得太近
- 宽高固定保证图片尺寸统一，border 和 borderRadius 提升视觉效果
注意事项与常见问题
使用 float 布局时，有几个关键点需要注意：
-
清除浮动影响：浮动元素可能影响后续布局，可在容器末尾添加
clear: both;防止塌陷 -
父容器高度塌陷：如果父元素没有设定高度，可能无法包裹浮动子元素。可通过给父元素添加
overflow: hidden;解决 - 响应式适配：在小屏幕上，可考虑取消浮动，让图片独占一行，提升可读性
现代替代方案简要对比
虽然 float 是传统有效的方法，但现代布局更推荐使用 Flexbox 或 Grid。不过对于简单的图文环绕，float 依然简洁高效，兼容性好，学习成本低。
例如，Flex 实现图文并排更灵活，但不能实现文字“环绕”效果；而 float 在语义上更贴近“文字环绕图像”的原始需求。
基本上就这些。掌握 float 的使用，能快速实现图文混排，是前端开发中的基础技能之一。实际项目中结合语义结构与样式微调，效果更佳。
