css浮动图片排版_css文字环绕图片实现方法

最常用可靠的文字环绕图片方式是用float属性，通过float:left或right使图片浮动，文字自动环绕，配合margin控制间距，用clearfix等方法清除浮动防止塌陷。

让文字环绕图片，最常用也最可靠的方式就是用 float 属性。它能让图片脱离文档流向左或右“漂”起来，后面的文本自然会绕到另一侧排版。

基础浮动写法

给图片加 float: left; 或 float: right; 即可触发文字环绕效果：

• 图片加 float: left; → 文字从右侧开始环绕
• 图片加 float: right; → 文字从左侧开始环绕
• 记得设置图片的 margin（比如 margin-right: 12px;），避免文字贴得太紧

控制环绕范围与间距

浮动只影响后续的块级元素和内联内容，但默认会一直影响到父容器底部。常见优化方式：

• 给图片加 width 和 height（或使用 max-width: 100%; 响应式）防止撑破布局
• 用 margin-bottom 控制图片下方文字的起始距离

• 若只想让一段文字环绕，把这段文字包在单独的
  或 里更可控

  清除浮动避免布局塌陷

  浮动元素会脱离文档流，可能导致父容器高度塌陷（看起来“没内容”）。常用清除方法：

  • 在父容器末尾加一个空标签：
  • 给父容器设置 overflow: hidden; 或 overflow: auto;（简单有效）
  • 现代推荐用伪元素清除：.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加 class="clearfix"

  替代方案：CSS Shapes（进阶）

  如果想实现更复杂的环绕效果（比如文字绕着圆形、多边形图片走），可以尝试 CSS Shapes：

  • 配合 shape-outside + clip-path 使用，例如：shape-outside: circle(50%);
  • 注意：需搭配 float 才生效，且目前对 IE 完全不支持，Chrome/Firefox/Edge 较新版本可用
  • 日常排版中，float 已足够；Shapes 更适合设计感强的专题页