文字环绕图片css实现

1.首先想到父divrelative，子absolute，这时有个问题，如何首行缩进

<div class="container">
	<img src=""></img>
	<p>我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作</p>
</div>
.container {
	position:relative;
	img {
		position:absoulte;
		width: 4vw;
		height: 4vw;
		top: 0;
		left: 0;
	}
	p{
		text-indent: 2rem;//首行缩进
		line-height: 5vw;
		font-size: 1rem;
		text-align:left;
	}
}

2.图片浮动，文字自动包裹

   <style>
        .img-left {
            border: 3px solid #005588;
            width:100%;
            word-break : break-all;//对单词进行断词处理。
            word-wrap : break-word ;//允许长单词换行到下一行。 当一个单词长度超过div的宽度时，默认是不会换行的
        }
        .img-left img {
            float:left;  /* 对图片进行浮动就可以实现了  */
            width:150px;
        }
    </style>
   
   <div class="img-left">
        <img src="" alt="pic"/>
        这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
        <div style="clear:both;"></div>
    </div>

3.使用背景图片

<div class="bgDIv">
	<p>我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作我是好学生，我要好好学习，好好工作</p>
</div>
.bgDiv{
	background:url(abc.jpg) no-repeat 0vw 0.5vw;
	background-size: 4vw 4vw;
	p{
		text-indent: 5vw;
		line-height: 5vw;
		font-size: 1rem;
		text-align:left;
	}
}

示例二：借鉴地址：https://www.cnblogs.com/lanleiming/p/5434314.html