xhtml 코드 "float : right"및 "clear : right"가 작동하지 않습니다.

Question

이미지 파일이 정상적으로 표시됩니다. 이미지를 지우지 않는 "clear : right"속성이있는 스팬 스타일이있는 단락입니다. 텍스트는 오른쪽 여백이 요소 (이 경우 이미지)에서 벗어나기 전에 나타납니다.

다음은 body 태그 사이에있는 모든 코드입니다. 파일에는 xml 프롤로그가 있고 xhtml transitional을 사용하는 DTD가 있고 여는 태그에는 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> 

이미지를 오른쪽으로 지우지 않는 두 번째 단락입니다. "clear"속성은 선행 요소 만 지우는 것을 알고 있습니다. 그러나 이미지는 "clear"태그 앞에 있습니다. 나는 그것이 왜 분명하지 않은지를 알 수 없다. 내가 xhtml을 마지막으로 사용한 지 몇 년이 지났습니다. html5가 문제라는 것을 알고 있지만 DTD가 xhtml transitional을 가리키고 있으므로 여전히 작동해야합니다.

두 번째 단락이 이미지를 오른쪽으로 지우지 않는 이유를 누군가 말해 줄 수 있습니까? 나는 아마도 이것에 대해 너무 많이 생각해 왔고 대답은 내 앞에서 바로 일어난다. 답변 해 주셔서 감사합니다.

Answer 1

clear 속성은 블록 수준 요소에만 적용됩니다. 스팬 요소는 기본적으로 인라인 수준이며 변경되지 않습니다. clear:right을 스팬의 p 요소로 이동하면 클리어가 적용됩니다.

이것은 XHTML 1.0 Transitional에만 해당되는 것은 아닙니다. HTML5는 완전히 동일합니다.