개인적으로 살펴본 봐, width와 height 사용은 정확히 예측하고 처리가 가능한다면 문제가 없겠지만 다른 잠재된 문제를 만들어 낼 수 있기에, 나의 결론은 zoom을 같이 사용하면 돼. overflow는 IE7이상에서 적용이고 zoom은 IE7이하로 중복이긴 하나 IE6을 해결하기 위해 같이 사용하면 되겠지. 

자 이제. 완성되었어. 이제 clear:both 없이도 해결되었지?"

김군 왈, "와... 이거 좀 복잡하긴 하다. 외워서 써먹을 수 있긴 하지만 대충 원리는 알 수 있을 것 같다. 이제 그렇다면 이를 넣어서, clear:both 블록을 없애고 다시 한번 짜봐야지."

※ 요약,  div의 clear:both 사용 대신 부모의 프로퍼티 추가 내용

---- 추가 부록 : IE6 이하에서 발생 가능한 문제점 처리  ---

이전에 마진은 종종 padding으로 처리하고 내부에서 다시 div를 사용하는 것이 좋다며 가볍게 넘어갔다. 아무래도 후한(?)을 생각해서 발생할 문제와 그에 대한 해결을 다음과 같이 살펴 보자. :) 

IE6에서는 float된 요소에 마진 사용은 2개의 버그가 있어 꽤나 주의를 요하나 이들은 다행스럽게 큰 조작(?, 가령 스크립트 사용) 없이 해결이 가능하다. 

정상적 처리라면 첫 그림에서는 LEFT C는 아래로 내려와야 한다. 좀더 폭을 줄이다 보면 다음의 그림처럼 아래로 내려온다. 이러한 경우 부모가 이들을 제대로 모두 감싸야 한다. 그러나 LEFT C만 둘러싸고 있다. 

이 문제도 hasLayout과 관련 되어 있다. 따라서 관련 프로퍼티를 적절히 설정해주면 된다. 앞서 했던 것과 마찬가지로 IE6은 해당 부모의 zoom:1 또는 _height: 1px은 사용하면 될 것이다. 그러나 우린 이미 clear:both를 빼면서 zoom:1 등으로 설정했기에 이 문제는 자연스레 해결되었다. 

다른 버그는 "더블 마진 버그"라고 불리는 것이다. IE6은 float된 방향과 같은 방향의 마진을 설정된 경우, 해당 첫 요소는 설정된 마진의 2배 값을 가진 버그가 있다. 이를 좀더 정확히 작성하면 다음과 같은 조건이다.

 앞의 그림을 다시 재활용 해보자. 내부의 요소는  모두 maring:10px로 설정되었다. LEFT A와 LEFT B 요소 사이는  당연히 20px로 떨어지게 된다. 정상적인 처리이다. 그러나 첫 요소인 LEFT A 블록은 이를 둘러싼 부모와의 왼쪽 마진은 얼마가 되어야 하나? 정상적인 처리라면 지금의 20px이 아닌 그 반으로 10px이 되어야 한다. 이 값은 아래와 위로 떨어진 값과 같이 좌측과 벌어져야 한다. 

----- 

다음 시간에 이어.... 

IE6에서 float된 요소에 관한 마진의 문제와 해결을 추가 하였음...