CSS：实现文字环绕在图片周围的效果

要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。

<p>《程序员修炼之道（从小工到专家）》
  <img class="left"
    src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J1bGVfZGF6ZQ==,size_16,color_FFFFFF,t_70"
    width="200px" />
  第一章 · 注重实效的哲学 注重实效的程序员能够越出直接的问题去思考，总是设法把问题放在更大的语境中，总是设法注意更大的图景。 关心你的技艺。 思考！你的工作。1. 我的源码让猫给吃了
  对你的职业生涯负责，并且不害怕承认无知或错误。 当你犯错误、或是判断失误时，诚实地承认它，并设法给出各种选择。不要责备别人或别的东西，或是拼凑借口。 2. 软件的熵
  不要容忍破窗户。 不要留着“破窗户”（低劣的设计、错误决策、或是糟糕的代码）不修，发现一个就修一个。
  如果没有足够的时间进行适当的修理，就用木板把它定起来（或许你可以把出问题的代码放入注释，或是显示“未实现”消息，或是用虚设的数据加以替代）。
  如果你发现你的团队和项目的代码十分漂亮——编写整洁、设计良好，并且很优雅——你就很可能会格外注意不去把它弄脏。 3. 石头汤与煮青蛙 做变化的催化剂。 记住大图景。 要持续不断地观察周围发生的事情，而不只是你自己在做的事情。
  4. 足够好的软件 给用户机会，让他们参与决定你所制作的东西何时已足够好。 使质量成为需求问题。 不要因为过度修饰和过于求精而损毁完好的程序。 5. 你的知识资产 定期投资 多元化 管理风险 低买高卖 重新评估和平衡
  定期为你的知识资产投资。
</p>

p {
  margin: 0 auto;
  width: 50%;
  margin-top: 80px;
}

img.left {
  border-radius: 100%;
  float: left;
  shape-outside: circle();
  margin: 35px 25px 25px 0;
}

img.right {
  border-radius: 100%;
  float: right;
}

效果图：