核心:利用 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> 么过来的吗,贪玩蓝月真好玩,系兄弟就来砍我你