CSS如何让图片浮动_text环绕与float结合实现文字环绕效果

使用CSS的float属性可实现图片浮动与文字环绕，float:left或right使文字围绕图片排列，配合margin调整间距，再通过clear:both清除浮动避免布局混乱，结合clearfix类即可完成清晰排版。

在网页设计中，让图片浮动并实现文字环绕效果是常见的布局需求。通过CSS的 float 属性，可以轻松实现图片与文本的自然环绕。

使用 float 让图片浮动

将图片设置为左浮动或右浮动后，周围的文本会自动围绕图片排列。

常用方法如下：

• float: left; — 图片靠左，文字在右侧环绕
• float: right; — 图片靠右，文字在左侧环绕
• float: none; — 默认值，不浮动

示例代码：

img {
  float: left;
  margin: 10px; /* 给图片和文字之间留出间距 */
  width: 150px;
  height: auto;
}

配合 margin 控制环绕间距

仅设置 float 可能会让文字贴得太近，影响阅读。添加 margin 可以优化排版。

建议做法：

• 给浮动图片设置左右上下外边距，提升可读性
• 通常设置 margin-right 和 margin-bottom 即可

例如：

img {
  float: left;
  margin: 0 15px 10px 0;
}

清除浮动避免布局混乱

当后续内容不需要环绕时，应清除浮动，防止影响下面的元素。

使用 clear 属性：

• clear: both; — 阻止元素出现在浮动元素的旁边
• 可在不需要环绕的元素前加一个空标签或使用伪元素清除

推荐的清除方式（使用伪元素）：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后将该类加在包含浮动元素的父容器上。

基本上就这些。利用 float 搭配 margin 和 clear，就能实现自然的文字环绕效果，简单有效，兼容性也好。