2015-02-06 50 views
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; 
} 

回答

2

根據W3組織,這是用於網絡的標準。P只能有Phrasing elements

img是措辭元件,以便<p class="clearfix"><img class='fox' /></p>是有效的html,您的瀏覽器按預期處理它。

figure不是一個措辭元素,因此<p class="clearfix"><figure class='fox'></figure></p>是無效的html,您的瀏覽器通過將其更改爲<p class="clearfix"></p><figure class="fox"></figure><p class="clearfix"></p>來相應地進行更正。所以你得到不同的輸出。

P.S:這是因爲您的瀏覽器如何呈現html