xhtmlコード "float：right"と "clear：right"が機能していません

Question

画像ファイルは正常に表示されています。画像を消去していない「クリア：右」属性を持つスパンスタイルの段落です。右側の余白の前にテキストが表示されています（この場合は画像）。

bodyタグの間にあるすべてのコードは次のとおりです。このファイルにはxmlプロローグがあり、xhtml transitionalを使用しているDTDがあり、openingタグにはHTML名前空間を指定するxmlns属性が含まれています。

<h1 style="text-align: center">Tourist Attractions</h1> 

<hr /> 

<p> 
<img src="images/child.jpg" alt="child" style="border: 5px ridge orange; 
float: right" /> 
<span style="font-weight: bold; font-family: arial, helvetica, sans serif; 
color: darkblue"> 

The City of Desert Park has many opportunities for fun, recreation, and 
entertainment. Throughout every month, you will find activities for all ages 
and lifestyles. The weather in Desert Park is conducive to outdoor 
activities year-round. 

</span> 
</p> 
<p><span style="font-family: arial, helvetica, sans-serif; color: darkblue; 
clear: right"> 

Visit the Parks and Recreation Page for the latest information on the 
Basketball League Play-off Games. 

</span> 
</p> 

イメージを右にクリアしていないのは2番目の段落です。私は "クリア"属性が先行要素のみをクリアすることを知っています。しかし、イメージは "クリア"タグの前にあります。私はなぜそれがクリアされていないのか分かりません。私が最後にxhtmlを使ってから数年が経ちました。私はhtml5が事であることを知っていますが、DTDはxhtml transitionalを指していますので、まだ動作するはずです。

誰かが2番目の段落が画像を右にクリアしていない理由を教えてもらえますか？私はおそらくこれについてあまりにも多くのことを考えており、答えは私の目の前にあります。ご回答いただきありがとうございます。

Answer 1

clearプロパティは、ブロックレベルの要素にのみ適用されます。スパン要素は、デフォルトではインラインレベルであり、あなたはそれを変更していません。 clear:rightをスパンを含むp要素に移動すると、クリアが有効になります。

これはXHTML 1.0 Transitionalに固有のものではありません。 HTML5はまったく同じです。