在 img 标签上浮动是可以的，不适用于图形标签答案

【问题标题】：Float on img tag is OK not when applied on figure tag在 img 标签上浮动是可以的，不适用于图形标签
【发布时间】：2015-02-06 14:59:33
【问题描述】：

最近在使用图形标签进行一些测试时，我发现了一些奇怪的东西。虽然我可以轻松地将图像标签浮动在段落内，并将段落的背景颜色保留在段落下方和图像本身。我无法通过包含我的图像的浮动图形标签获得类似的结果。

这里没有说话，这里有两个链接，以确保您理解我遇到的问题：

简单的图片漂浮在段落中，效果很好： here

相同，但带有一个包含图像标签但未按预期工作的图形标签： here

如何在使用图形标签时获得相同的结果？

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

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>

CSS

*{
  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;
}

【问题讨论】：

标签： html css tags figure

【解决方案1】：

根据 W3 org，这是 web 的标准。 P 只能有Phrasing elements。

img 是一个短语元素，因此<img class='fox' /> 是有效的 html，您的浏览器会按预期处理它。

figure 不是短语元素，因此 <figure class='fox'></figure> 不是有效的 html，您的浏览器会通过将其更改为 <figure class="fox"></figure> 进行相应的处理来纠正它。所以你会得到不同的输出。

P.S：这是因为你的浏览器如何呈现 html

【讨论】：