CSS : float

CSS positioning: absolute, relative ,float

CSS에서의 positioning 방식에는 크게 3가지가 있다.

absolute, relative, float가 그것이다.

absolute는 절대 좌표를 의미한다. 이것은 절대 좌표를 기준으로 위치를 정한다.

relative는 상대 좌표를 의미한다. 이것은 상대 좌표를 기준으로 위치를 정한다.

여기서 absolute와 relative의 차이가 상당히 헷갈리는 부분인데,

relative가 어떤 것에 상대적인지 이해하는 것이 중요하다.

relative는 태그 내에서 마지막 위치를 기준으로 상대값을 정한다.

예를 들어 A, B, C라는 객체가 있다고 가정해보자.

만약 A, B, C의 가로 길이가 10이라면, A, B, C를 나란히 있게 하기 위해서

absolute의 경우 A의 위치가 0이면 B는 10, C는 20을 left 위치값으로 주어야 한다.

relative의 경우 A의 위치가 0이면 B도 0, C도 0으로 해주면 A, B, C가 나란히 있게 된다.

중요한 사실은 absolute와 relative와의 공통점인데,

이부분때문에 많이 헷갈린다.

absolute와 relative의 최초 위치의 기준점은 부모 객체의 시작위치이다.

좀더 이해하기 쉽게 예를 들어본다.

다음과 같은 코드를 보면 알 수 있다. (R는 relative, A는 absolute)

</div>

</div>

R1, R2, A1, A2은 각각 left:0px; top:0px;이라 하면,

이경우 class X에 나타나는 R1, R2는 좌우로 나란히 있게 되고,

class Y에 나타나는 A1, A2는 겹치게 된다.

float는 좌표값을 지정하지 않고, 특정한 방향으로 흐르도록 위치지정을 하는 방식이다.

굉장히 유연한 위치 지정 방식으로, 유동적인 크기를 가질 수 있다는 장점이 있다.

단, CSS에서 float를 사용할 때는 수많은 버그와 싸울 준비를 하고 사용해야 한다.

일단 브라우저마다 차이를 갖게 만드는 제1순위이기 때문이고,

각종 버그와 깨지는 레이아웃의 주범이기 때문이다.

float의 버그에 대해서는 후에 자세히 다루도록 한다.

Horec's Blog