如何在CSS中制作图文混排_float与margin控制图片和文字

新闻中心 NEWS CENTER

2025-11-30

浏览次数：次

使用float和margin可实现图文混排。将img设置为float:left或right使文字环绕，通过margin调整间距，避免文字贴边；为防止布局错乱，需用clear:both清除浮动，推荐使用.container::after伪类清除，确保父容器高度正常，布局稳定。

如何在css中制作图文混排_float与margin控制图片和文字

在网页设计中，图文混排是常见的布局需求，比如文章内容中图片居左或居右，文字环绕其周围。通过CSS中的 float 和 margin 属性，可以轻松实现这一效果。下面介绍具体方法和注意事项。

将图片设置为浮动元素，可以让文字自动环绕在它的旁边。

常用方式：

示例代码：

img {
  float: left;
  width: 150px;
  height: 100px;
  margin-right: 10px; /* 防止文字贴边 */
}
p {
  /* 段落正常流式布局，会自动环绕图片 */
}

仅使用 float 可能使文字紧贴图片，影响阅读体验。通过设置 margin 可以控制图片与文字之间的距离。

关键点：

例如：

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
}

浮动元素脱离文档流，可能导致父容器高度塌陷或后续内容错位。使用 clear 属性可解决此问题。

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

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

将此类容器包裹图文内容，确保布局稳定。

基本上就这些。合理使用 float 和 margin，配合 clear 清除浮动，就能实现整洁自然的图文混排效果。虽然现代布局更多使用 Flex 或 Grid，但在简单场景下，float 依然实用且兼容性好。

以上就是如何在CSS中制作图文混排_float与margin控制图片和文字的详细内容，更多请关注其它相关文章！