在css中，浮动是实现图片文字混排的核心手段之一，通过给图片元素设置float属性，可以让图片脱离常规文档流，文字则会自动环绕在图片周围，形成自然的混排效果。这种排版方式在新闻详情页、博客文章等场景中应用非常广泛，能够提升页面的可读性和美观度。
float属性的基本用法
float属性用于定义元素在哪个方向浮动，可选值有left、right、none，默认值为none。当给元素设置left或right后，元素会向对应的方向浮动，直到碰到父元素的边缘或者另一个浮动元素为止。
要实现图片文字混排，通常只需要给图片设置浮动属性即可，文字所在的容器不需要额外设置浮动，会自动环绕浮动后的图片。以下是基础的混排代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片文字混排示例</title>
<style>
.article {
width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.article-img {
/* 图片向左浮动，文字会环绕在图片右侧 */
float: left;
width: 200px;
height: 150px;
margin-right: 15px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="article">
<img src="https://ipipp.com/demo-img.jpg" alt="示例图片" class="article-img">
<p>这是一段环绕在图片周围的文字内容，当图片设置了向左浮动后，这段文字会自动排列在图片的右侧，如果文字内容足够多，还会在图片下方继续排列，形成自然的混排效果。这种排版方式符合用户的阅读习惯，能够避免页面出现大面积的空白区域。</p>
<p>第二段文字也会继续环绕在图片周围，直到文字内容排完或者遇到清除浮动的元素为止。在实际开发中，可以根据需要调整图片的浮动方向，比如设置float: right让图片靠右排列，文字就会环绕在图片左侧。</p>
</div>
</body>
</html>
不同浮动方向的混排效果
float属性的方向不同，文字环绕的位置也会不同，常见的两种场景如下：
- 图片左浮动：设置
float: left，图片靠左排列，文字在图片右侧环绕，适合大多数从左到右阅读的场景。 - 图片右浮动：设置
float: right，图片靠右排列，文字在图片左侧环绕，适合需要突出文字内容、把图片放在侧边的场景。
如果同时有多个图片需要浮动，需要注意浮动元素的排列规则，后面的浮动元素会紧跟在前一个浮动元素的后面，直到父元素宽度不足时才会换行。
浮动带来的问题及清除方法
使用浮动属性后，最常见的问题是父元素高度塌陷。因为浮动元素脱离了常规文档流，父元素无法感知浮动元素的高度，导致父元素的高度变为0，后续的布局可能会受到影响。
解决这个问题的核心是清除浮动，常用的清除浮动方法有以下几种：
1. 使用clear属性
在父元素的最后添加一个空的块级元素，设置clear: both，可以清除左右两侧的浮动，让父元素重新包裹浮动元素。示例代码如下：
/* 清除浮动的基础样式 */
.clear-float {
clear: both;
}
在html中添加对应元素：
<div class="article">
<img src="https://ipipp.com/demo-img.jpg" alt="示例图片" class="article-img">
<p>文字内容...</p>
<div class="clear-float"></div>
</div>
2. 父元素设置overflow属性
给父元素设置overflow: hidden或者overflow: auto，可以触发父元素的BFC（块级格式化上下文），从而包裹住内部的浮动元素，解决高度塌陷问题。这种方式不需要添加额外的html元素，更加简洁。
.article {
width: 800px;
margin: 0 auto;
line-height: 1.6;
/* 触发BFC，清除内部浮动 */
overflow: hidden;
}
3. 使用伪元素清除浮动
这是目前最推荐的清除浮动方式，通过给父元素添加伪元素::after，在父元素内容最后插入一个隐藏的块级元素，设置清除浮动。这种方式不会破坏html结构，复用性也更高。
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
使用时只需要给父元素添加clearfix类即可：
<div class="article clearfix">
<img src="https://ipipp.com/demo-img.jpg" alt="示例图片" class="article-img">
<p>文字内容...</p>
</div>
注意事项
在使用浮动实现图片文字混排时，还需要注意以下细节：
- 给浮动图片设置合适的margin值，避免文字和图片贴得太近，提升阅读体验。
- 如果文字内容较少，可能会出现文字高度低于图片高度的情况，此时可以给图片设置合适的margin-bottom，让下方内容正常排列。
- 在移动端适配时，需要根据屏幕尺寸调整图片的宽度，避免图片过宽导致文字排列空间不足，可以结合媒体查询设置响应式样式。
需要注意的是，浮动最初的设计目的就是为了实现文字环绕图片的效果，因此用它来做图片文字混排是非常符合语义的，不需要担心使用场景不合理的问题。