CSS实现图片悬浮动(float:right)在文字文章右上角，文字自适应

今天突然遇到需要将图片浮动在正文右上角的样式，以前做过可就是一时想不起来了，去百度搜索，竟然搜不到答案，真是汗颜，这样只好自己写一篇了，实现如下示例图：


其实要实现这样的效果很简单，图片容器和正文容器放置的位置很重要：

• HTML：

  <div class="article-content">
    <div class="img-box"><img src="xxxx.jpg" /></div>
    <p>正文内容123456正文内容</p>
    <p>正文内容123456正文内容</p>
    <p>正文内容123456正文内容</p>
    ......
  </div>
  

  注意：

  1. 记得图片容器一定要放在最前面才可以
  2. 注：上图第一行是有意要放最前面的
  3. 所以只要是放在float元素后面的都会文字环绕图片

• CSS

  .img-box{float:right;}
  

  其实这里就是这么简单，关键是图片容器位置放对了就可以， 因为很多时候我们容易将图片放在最后，导致浮动被正文标签顶下来； 赶紧去试试吧