CSS实现图片居中显示的文字环绕功能

核心：利用 float 浮动属性

首先我们来看一下普通的图片文字环绕怎么实现

图片文字环绕的原理：

• 图片添加浮动，脱离文档流

• 下面的文本盒子就会往上移动

• 只有盒子元素才会被覆盖，文本是一个真实的dom结构不会被覆盖

看看代码实现吧

      <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid #000;
        }
        img{
            float: left;
        }

    </style>
  <div>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190822%2F2055815688ca4571851a1adfa354c4f4.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621061903&t=5339a80414d04ee218ccc5cdd7324d9d" alt="">
        <p>
         <span>你知道我这五年怎</span>   么过来的吗，贪玩蓝月真好玩，系兄弟就来砍我你