float 를 해결하는 방법

왼쪽 정렬, 오른쪽 정렬을 하는 방법으로 float 를 사용하곤 합니다. 아마도 가장 많이 사용하는 선택자가 아닌가 싶네요.
그런데 주의 할점이 있습니다.

float:left 는 왼쪽으로 띄우고, float:right 는 오른쪽으로 띄웁니다.
문제는 이렇게 float 로 띄울경우 다음에 오는박스가 동일한 크기가 오면 상관없지만 만약 크기가 작을경우 , 그위로 올라타는 경우가 생깁니다.


즉 3번 박스가 원래는 4번자리에 위치해야 하지만 2번 다음에 위치하게 됩니다.
차례대로 정렬이 되지 않는다는 거죠.

2번 박스가 작아도 동일하게 옆으로만 정렬이 돼야 하는데 동일한 크기거나 크기가 클경우는 정상적이지만 만약 크기가 작다면 위처럼 올라타는 문제가 생깁니다.

또하나 float 로 지정을 할경우 그 위부모가 배경을 지정해도 먹지를 않습니다. 그것은 자식 즉 float 를 한 선택자가 한공간에 자리를 차지하고 있는것이 아니라 공중에 띄워져있기 때문입니다.

float 가 띄우다라는 의미이거든요.  

즉 float 를 사용할경우 자식의 크기를 알수없어서 자식과 부모가 따로 놉니다.
아래이미지처럼 부모에게 background 를 지정하면 먹지 않습니다. 
왜냐면 자식의 크기를 모르기 때문이죠.

 

이러한 버그가 있기 때문에 float 를 사용한경우 반드시 float 를 해제해줘야 합니다.
뭐 위의 경우는 간단하게 할수도 있지만 문제는 float를 올바르게 해제하는 방법을 알려드리겠습니다.
float 를 해제하는 방법으로는 float 를 같이 float 로 지정하는 방법, overflow 로 하는 방법도 있지만 장단점이 있습니다.
가장 확실한 방법은 마크업을 수정하지 않고 선택자를 사용하는 방법입니다.

이전에 float 를 사용해서 ie에서 어떤버그가 있는지 살펴보았습니다.
아래는 어디서나 사용할수 있는 확실한 방법을 알려드리겠습니다. 

아래와 같은 코드가 있다고 가정합니다.

<div id="float_parent">
	<div class="float_child">child</div>
</div>

그리고 아래처럼 지정할 경우가 있다고 가정합니다.

.float_child { float:left; }

이럴경우 위의 부모인 float_parent 에 아래처럼 지정을 해줘야 합니다.

.float_parent:after { /* :after 을 지원하는 브라우져 규칙 */
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
* html .float_parent { height:1%; } /* ie5 와 ie6 을 위한 규칙 */
*:first-child+html .float_parent { min-height:1px; } /* ie7 을 위한 규칙 */

이에 대해서 설명합니다.
.float_parent 에 점하나를 추가합니다. -> content:".";
이 뒤에 나오는 플롯을 해제한다. -> clear:both;
그리고 생성한 점(.)을 다시 안보이게 한다 -> height:0; visibility:hidden;

:after 을 이용해 플롯을 해제했기 때문에 따로 .float_parent 에 플롯을 지정하지 않아도 됩니다. 이점은 아주 유용한 점입니다.
이것까지만 하면 참 좋을텐데 아시겠지만 ie 는 :after 라는 유사 선택자를 지원하지 않습니다. 그래서 위처럼 :after 를 지원하는 브라우져규칙을 우선 세웁니다.

다음 ie5 ~ 6을 위해서 * 를 사용합니다. *은 ie6 이하 브라우져에서만 적용되고 나머지 브라우져는 인식하지 않습니다.

또 한가지 ie 7은 height:1%; 의 버그는 해결되었지만 여전이 유사선택자인 :after 을 지원하지 않습니다. 그래서 따로 지정을 해줘야 합니다.
그래서 ie7만 해당하는 핵으로 *:first-child+html 을 사용합니다.
개    개