clear 에 대해서 질문입니다.

[hiphapis]

연달아 질문만 올리네요
그것도 초보적인 질문만...

다름이 아니라, clear 요놈에 대해서 질문입니다.

clear:left
clear:right
clear:both
clear:none

IE에서는 틀려서 보이는데, FF에서는..결과가 똑같아요..;;

float의 경우, 전부 틀리게 보여주기 때문에, 잘 알겠는데,
clear는 잘 모르겠네요..
일단 float이랑 틀린 차이점은 알겠는데..
파라메터마다 뭐가 틀린건지 모르겠네요..

[hyeonseok]

clear는 이전 코드에서 float된 효과를 없애주는 역할을 합니다.

float: left; 를 사용하면 그 아래의 그림이나 텍스트는 left된 엘리먼트의 좌측에 자리하게 되는데 그 아래의 그림이나 텍스트에 clear: left; 속성을 주게되면 좌측이 아니라 아래에 위치 하게 됩니다.

clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.

Code: Select all

<p>
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: left;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: right;" />
<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: both;" />
</p>

참고코드 입니다.

[hiphapis]

친절한 답변, 정말 감사드립니다. (__)
죄송하지만,
몇가지 의문점가, 여쩌볼것이 더 있는데...

말씀하신대로 코드를 적용하면.

ㅁㅁㅁ
ㅁㅁ
ㅁ

이게 맞는건가요..?
아니면

ㅁㅁㅁㅁ
ㅁ
ㅁ

이게 맞는건가요....?

위의것은 FF에서의 출력이고
아래것은 IE에서의 출력입니다.
,

clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.

그렇다면,

Code: Select all

<img src="http://hyeonseok.com/hyeonseok.png" alt="hyeonseok.com" style="float: left; clear: right;" /> 

는 clear가 적용이 안되어야지 정상이 아닌가요...?

,

아래는, float:left 했을때, clear들을 다르게 한 경우입니다.

Code: Select all

		<div style="width:300px;border:1px solid">
			float:left<br />
			clear:left - 적용<br />
			<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:left;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:left<br />
			clear:right - Clear가 안되어야 정상<br />
			<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:right;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:left<br />
			clear:both - 적용<br />
			<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:both;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:left<br />
			clear:none - Clear가 안되어야 정상<br />
			<div style="float:left;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:none;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>

그리고, 아래는 float:right로 하고 cleear들을 다르게 한 것입니다.

Code: Select all

		<div style="width:300px;border:1px solid">
			float:right<br />
			clear:left - Clear 적용 안됨<br />
			<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:left;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:right<br />
			clear:right - 적용<br />
			<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:right;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:right<br />
			clear:both - 적용<br />
			<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:both;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>
		<br />
		<div style="width:300px;border:1px solid">
			float:right<br />
			clear:none - Clear 적용 안됨<br />
			<div style="float:right;width:130px;border:1px solid gold"><img src="http://hyeonseok.com/hyeonseok.png" style="vertical-align:sub;" alt=""/></div>
			<div style="clear:none;color:red;border:1px solid;font-size:10px;width:80px">웹표준화 화이팅!</div>
			<div style="color:blue;border:1px solid">가나다라마바사아자차카타파하가나다라마바사아자차카타파하</div>
		</div>

위의 코드로 돌려보시면 아시겠지만.
float:left 로 정의를 하고 나면,
IE상에서는

clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.

이렇게 적용이 되지만, FF상에서는 clear적용된 모습이 모두 똑같이 되어버립니다.
(이해가 잘 안가시면, 직접 이미지 돌려보시면 이해하기 쉬우실꺼에요)

하지만, float:right를 정의하고, clear를 각각 다른 값들로 했을때, 결과물은

clear: right는 float: right를, clear: both는 float: left, float: right 둘다를 clear 합니다.

에 딱 들어맞죠, IE, FF모두 말씀하신것에 맞게 나옵니다.




float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ

[hyeonseok]

ㅁㅁㅁ
ㅁㅁ
ㅁ

이게 맞는건가요..?
아니면

ㅁㅁㅁㅁ
ㅁ
ㅁ

이게 맞는건가요....?

firefox 의 출력이 맞습니다. IE의 float 랜더링 버그 중에 하나가 위에 공백이 있을 경우 이것을 clear가 되었다고 하여도 채워주려고 하는 경향이 있습니다. 그래서 다섯번째 이미지가 위로 올라간 것입니다.

float:right 는 제대로 되었는데, 왜 float:left는 clear에 어떤 속성을 주든 똑같은 결과같이 FF에서 나온다는 거죠..
전, 이게 궁금한것이고요, ㅎㅎ

이것은 width를 지정했기 때문에 그렇습니다. width를 80px로 지정을 했는데 이미지가 80px가 넘어서 텍스트가 이미지의 우측에 붙지 못하고(우측에 공간이 없으므로) 이미지가 다 나온 다음에 아래에 나오는 것입니다. IE의 경우 width 를 지정하면 float를 지정하지 않아도 float가 되어 버리는데 이것은 잘못된 float의 적용입니다. 보다 상세한 것은 스펙을 참조...

http://www.w3.org/TR/CSS21/visuren.html#floats

[hiphapis]

완벽하게, 이해했습니다.

현석님, 정말 감사합니다!!

즐거운 한 주 되세요