0
最近，而与数字标签做一些测试时，我发现有些奇怪。虽然我可以轻松地将一个图像标记浮动到段落内，并将段落的背景颜色保留在段落和图像本身之下。我无法用包含我的图像的浮动数字标签得到类似的结果。在img标签上浮动是不是当应用于数字标签
而是说话的，这里两个环节，以确保你明白我的问题：
简单的图像沿段漂浮的正常工作：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;
}