核心：利用 float 浮动属性
首先我们来看一下普通的图片文字环绕怎么实现
图片文字环绕的原理：
图片添加浮动，脱离文档流
下面的文本盒子就会往上移动
只有盒子元素才会被覆盖，文本是一个真实的dom结构不会被覆盖
看看代码实现吧
<style>div{width: 1000px;height: 700px;border: 1px solid #000;}img{float: left;}</style><div><img src="/image_search/src=http%3A%2F%2F5b0988e595225.%2Fimages%2F0822%2F2055815688ca4571851a1adfa354c4f4.jpeg&refer=http%3A%2F%2F5b0988e595225.&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061903&t=5339a80414d04ee218ccc5cdd7324d9d" alt=""><p><span>你知道我这五年怎</span> 么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你知道我这五年怎么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我</p></div>
运行效果：
这样一个简单的图片文字环绕就实现了。
那如果想让图片居中，文字四周环绕显示怎么办呢？可惜 float 没有 center 这个属性值，于是只能想办法了。
这里我的实现思路是：
把一段文字分为两部分p1,p2，
同时添加伪元素p1::before,p2::before,
让p1::before 向右浮动，p2::before向左浮动，
它们的宽度各取照片的一半，
这两个伪元素是用来占位置的，图片最后放的位置就是这两个伪元素所占的位置。
直接上代码吧
<div><imgsrc="/image_search/src=http%3A%2F%%2Fnews%2Fimage%2F07%2F084a057c5177ae78.jpg&refer=http%3A%2F%&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621062361&t=dd91a8a124729336f02c42120a5b"alt=""><pclass="text1">狐狸是哺乳纲食肉目犬科狐属下的动物，一般所说的狐狸，又叫红狐、赤狐和草狐。它们灵活的耳朵能对声音进行准确定位、嗅觉灵敏，修长的腿能够快速奔跑，最高时速可达50km/h左右，所以主要以鱼、蚌、虾、蟹、鼠类、鸟类、昆虫类小型动物为食，有时也采食一些植物。实际上狐狸是民间对这一类动物的通称，种类繁多，分北极狐、赤狐、银黑狐、沙狐等。性格机敏胆小，常在古代神话中以"狐狸精"出现，虽在远古也曾作为图腾，但从不出现于正式祭祀中，皆因其"形象不雅"，多与狡诈鬼祟相关联。多年来，狐妖狐仙，在各种小说及趣闻中形成一种独有的妖精文化。</p><pclass="text2">狐狸身体纤瘦，毛长且厚。体长加尾长2到3英尺（60到90厘米）。狐狸毛茸茸的尾巴是头部和身体的一半或2/3，尖嘴。大多种狐狸耳朵大、直立、呈三角形。不同种类的狐狸颜色不同，即使同类的狐狸颜色也有区别。包括红色、黄色、浅棕或深棕色，各种程度的灰色、白色或黑色。狐狸的眼睛能够适应黑暗，瞳孔椭圆，发亮，类似于猫的眼睛，这一点狐狸和其他拥有圆形瞳孔的犬科动物不同。狐狸具有敏锐的视觉、嗅觉和听觉。大部分狐狸具有刺鼻的味道，由尾巴根部的臭腺放出。</p></div>
CSS如下:
<style>div{width:600px;height:600px;border:1pxsolid#000;position:relative;}.text1,.text2{width:50%;float:left; // 让两个p标签在同一行显示}.text1::before,.text2::before{content:"";display:block;width:150px; // 图片的宽度为300px,所以每个伪元素占一半为150pxheight:200px; // 图片的高度也是200px}.text1::before{float:right; // 左边的伪元素向右浮动}.text2::before{float:left; // 右边的伪元素向左浮动}img{width:300px;position:absolute; // 通过定位让图片去到想要的位置top:0;left:50%;transform:translateX(-50%);}</style>
运行效果：
这样就实现了图片居中的文字环绕效果了！
