图文混排是网页前端开发中非常基础且常用的布局场景，通过CSS的float属性和margin属性配合，可以轻松实现图片与文字的灵活排列效果，适配不同的页面设计需求。
float属性的基础作用
float属性用于让元素脱离正常的文档流，向左或者向右浮动，直到碰到父元素的边缘或者另一个浮动元素为止。在图文混排场景中，我们通常给图片设置float属性，让文字围绕图片排列。
float的常用取值有left、right、none，其中left表示元素向左浮动，right表示元素向右浮动，none是默认值，元素不浮动。
基础图文混排示例
下面是一个最简单的左浮动图文混排实现，图片向左浮动，文字自动围绕在图片右侧：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础图文混排</title>
<style>
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
.float-img {
float: left; /* 图片向左浮动 */
width: 200px;
height: 150px;
background-color: #f0f0f0;
margin-right: 15px; /* 图片右侧留间距，避免文字贴紧图片 */
margin-bottom: 10px; /* 图片底部留间距，避免文字贴紧图片底部 */
}
</style>
</head>
<body>
<div class="container">
<img src="https://ipipp.com/sample.jpg" alt="示例图片" class="float-img">
<p>这是一段围绕图片排列的文字内容，当图片设置向左浮动后，这段文字会自动排列在图片的右侧。如果文字内容足够多，还会在图片下方继续排列，形成自然的图文混排效果。开发者可以通过调整float的取值改变图片的浮动方向，从而实现不同的布局需求。</p>
<p>第二段文字会继续跟随前面的内容排列，同样会围绕浮动的图片进行布局，这就是float属性在图文混排中的基础作用。</p>
</div>
</body>
</html>
margin属性调整图文间距
仅使用float属性，文字和图片会贴得很近，视觉效果不佳，这时候就需要用margin属性调整两者的间距。margin可以设置元素四个方向的外边距，在图文混排中常用的设置是给浮动图片设置margin-right（左浮动时）或者margin-left（右浮动时），让文字和图片之间有合适的留白。
不同浮动方向的margin设置
如果图片是右浮动，那么需要给图片设置margin-left，让文字和图片左侧保持间距：
/* 右浮动图片的样式 */
.right-float-img {
float: right; /* 图片向右浮动 */
width: 200px;
height: 150px;
background-color: #f0f0f0;
margin-left: 15px; /* 图片左侧留间距 */
margin-bottom: 10px; /* 图片底部留间距 */
}
除了给图片设置margin，也可以给文字容器设置margin，但是需要注意浮动元素的特性，避免布局出现错乱。一般推荐直接给浮动图片设置margin，逻辑更清晰，也更容易维护。
清除浮动避免布局错乱
使用float属性后，浮动元素会脱离文档流，可能导致父元素高度塌陷，或者后续的非浮动元素排列异常，这时候需要清除浮动的影响。
常用清除浮动方法
- 给父元素设置
overflow: hidden，触发BFC让父元素包裹浮动子元素 - 在父元素末尾添加一个空的块级元素，设置
clear: both - 使用伪元素清除浮动，这是目前比较推荐的方式，不会额外增加DOM节点
下面是伪元素清除浮动的代码示例：
/* 清除浮动的通用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
只需要在父元素上添加clearfix类，就可以清除内部浮动元素带来的影响，避免布局错乱。
常见问题与解决思路
在实际开发中，图文混排可能会遇到一些问题，比如文字贴紧图片、父元素高度塌陷、浮动元素换行后布局异常等。大部分问题都可以通过调整margin的取值或者正确清除浮动来解决。如果文字内容太少，不足够围绕图片排列，可以给文字容器设置足够的高度，或者调整图片的尺寸，让布局更协调。
注意：float属性原本的设计用途是实现文字环绕效果，虽然早期常被用来做整体页面布局，但现在更推荐用Flex或者Grid做布局，float仅用于图文混排这类文字环绕场景更合适。
完整示例整合
下面是一个同时包含左浮动和右浮动图文混排的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整图文混排示例</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.container {
width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #eee;
}
.img-left {
float: left;
width: 180px;
height: 120px;
background-color: #e8f4ff;
margin-right: 15px;
margin-bottom: 10px;
}
.img-right {
float: right;
width: 180px;
height: 120px;
background-color: #ffe8e8;
margin-left: 15px;
margin-bottom: 10px;
}
.section {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="section clearfix">
<img src="https://ipipp.com/left-img.jpg" alt="左浮动图片" class="img-left">
<h3>左浮动图文混排</h3>
<p>这个模块中图片向左浮动，文字围绕在图片右侧。通过设置margin-right和margin-bottom，让图片和文字之间有合适的间距，避免内容紧贴影响阅读体验。</p>
<p>更多文字内容会延续这个排列规则，当文字高度超过图片高度后，文字会在图片下方正常排列，不会受到浮动的影响。</p>
</div>
<div class="section clearfix">
<img src="https://ipipp.com/right-img.jpg" alt="右浮动图片" class="img-right">
<h3>右浮动图文混排</h3>
<p>这个模块中图片向右浮动，文字围绕在图片左侧。对应的margin设置改为margin-left，同样保证文字和图片之间的留白合理。</p>
<p>两种方式可以根据页面设计的需要灵活选择，核心都是通过float控制图片的浮动方向，用margin调整间距，最后清除浮动避免布局问题。</p>
</div>
</div>
</body>
</html>