css设置文字包围图片

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以设置网页中元素的布局、颜色、字体等样式。

类型

CSS设置文字包围图片主要有以下几种方式：

浮动布局：通过float属性将图片浮动到左侧或右侧，文字会围绕图片排列。
定位布局：通过position属性将图片定位在特定位置，文字可以通过margin或padding来避开图片。
Flexbox布局：通过Flexbox容器可以轻松实现文字环绕图片的效果。
Grid布局：通过CSS Grid布局也可以实现复杂的文字环绕图片效果。

应用场景

新闻网站：在新闻文章中，常常需要将图片插入到文字中，并让文字环绕图片。
产品展示：在产品展示页面中，图片和文字的结合可以更好地展示产品特点。
博客文章：在博客文章中，图片和文字的结合可以使内容更加生动和有趣。

示例代码

以下是一个使用浮动布局实现文字环绕图片的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Wrap Around Image</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }
        img {
            float: left;
            margin-right: 20px;
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/200" alt="Sample Image">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

图片浮动后，文字没有环绕：
- 确保图片和文字在同一个容器内。
- 检查是否有其他CSS规则影响了浮动效果。

图片浮动后，容器高度塌陷：
- 可以在容器内添加一个空的div，并设置clear: both;来清除浮动。
- 使用overflow: hidden;或overflow: auto;来自动扩展容器高度。
Flexbox或Grid布局中文字环绕问题：
- 确保容器设置了display: flex;或display: grid;。
- 使用justify-content、align-items等属性来调整布局。