Html img标签上的浮动在图标签上应用时不正常

最近，在使用figure标签进行一些测试时，我注意到一些奇怪的事情。虽然我可以轻松地在段落内浮动图像标记，并将段落的背景颜色保留在段落和图像本身之下。我不能得到类似的结果与浮动数字标签包围我的形象

这里不是讨论，而是两个链接，以确保您理解我的问题：

简单的图像沿着段落浮动，效果很好：

相同，但图形标记包含图像标记，但未按预期工作：

如何在使用figure标记时获得相同的结果

这是代码，但检查codepen，问题会很明显

HTML结构(

---

根据w3org，这是web的标准。

p

只能有

img

是一个短语元素，因此

是有效的html，您的浏览器会按预期处理它

figure

不是一个短语元素，因此

不是有效的html，您的浏览器将其更改为

对其进行相应的处理，从而获得不同的输出

这是因为你的浏览器是如何呈现html的

<div class="wrapper">

    <p class="clearfix">

   <img class="fox" src="http://raptorimages.hu/wp-content/gallery/blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
<!-- the figure tag is supposed to work such as the image tag above when uncommented -->
  <!--<figure class="fox"> 
   <img src="http://raptorimages.hu/wp-content/gallery  /blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
  <figcaption>Running fox</figcaption>
  </figure>-->

  </p>

  <p>Praesent non risus enim. Duis ac mi tempus, feugiat nunc non, vestibulum magna. Curabitur in tempor lorem. Mauris fermentum vulputate </p>

</div>

*{
  box-sizing:border-box;
}
.wrapper{
  width:90%;
  background:#cecece;
  margin: 0 auto;
  padding: 1.1111111%;
}

.wrapper p{

  background-color:grey;
  padding:1.111111%;

}

.fox{
  float:right;
  padding:0 0 0 1.1111%;
}

img,video,object,embed{
  max-width:100%;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}