使用float属性可实现文字环绕图片效果,将图片设为float: left或right,文字自动在另一侧排列;2. 通过margin调整文字与图片间距,避免紧贴;3. 用clear: both清除浮动,防止影响后续布局。

要让文字环绕图片,使用 CSS 的 float 属性是最经典的方法。只需要将图片设置为浮动元素,文字内容会自动在其周围重新排列,实现环绕效果。
1. 基本用法:设置图片浮动
将图片的 CSS float 属性设为 left 或 right,文字就会围绕在另一侧排列。
例如,让图片靠左,文字在右侧环绕:@@##@@这里是环绕图片的文字内容……
2. 控制间距和布局
为了防止文字贴得太近,建议添加 margin 来留出空隙。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“前端免费学习笔记(深入)”;
- 使用 margin-right 避免文字紧贴图片右侧(当图片左浮动时)
- 使用 margin-left 适用于右浮动图片
- 也可设置上下 margin 以控制段落与图片的垂直距离
3. 清除浮动避免影响后续内容
浮动会影响后续元素的布局,可能造成错位。使用 clear 属性来结束环绕效果。
常见做法:- 在不需要环绕的元素前加入:
- 或对下一个块级元素设置 CSS:
clear: both;









