: 권리와 <span>

Question

나는 현재 다음과 같은 HTML 마크 업이 있습니다

<td class="title"> 
    <img src="my-image.png" class="thumbnail" /> 
    <span class="name">Product 1 Name</span> 
    <span class="code">EA-55</span> 
</td> 

내가 왼쪽의 썸네일을 떠 한 다음 옆에 줄 바꿈 각 범위를 표시하고 싶습니다. 출력은 다음과 비슷한 모습이 될 것입니다 그래서 :

+------+ Product 1 Name 
| img | EA-55 
+------+ 

나는 왼쪽 두 span 요소를 부유하고, span.name에 clear: right을 추가했습니다. 그러나 이것은 아무 효과가없는 것 같습니다. CSS는 다음과 같습니다.

clear: right이 Chrome에서 겉으로보기에는 무시되는 이유를 누구나 설명 할 수 있습니까?

table.basket tbody td img.thumbnail { 
    width: 30px; 
    height: 30px; 
    float: left; 
    border: 1px solid #000; 
    margin-right: 10px; 
} 
table.basket tbody td span.name, 
table.basket tbody td span.code { 
    float: left; 
    display: block; 
} 
table.basket tbody td span.name { 
    clear: right 
} 

Answer 1

clear: right 오른쪽으로 떠 아무것도 아래의 범위를 삭제합니다. 오른쪽에는 아무것도 떠오르지 않고 왼쪽에는 아무것도 없습니다. 플로팅 내용이 공간을 차지하지 않습니다. 각각의 떠 다니는 요소는 선에서 공간이 다 떨어질 때까지 같은 방향으로 다른 떠 다니는 요소 위에 쌓입니다. 오른쪽 상단에 쌓인 것을 지울 수는 없습니다. " 모두 요소 인 이 오른쪽으로 부 터 지울 수 있습니다.

내게 들리는 것은 .name과 .code 스팬은 자신의 라인에 넣기 만하면됩니다. 플로트를 제거하고 display: block으로 남겨 두십시오. See the jsFiddle.