[CSS] 6. 블록 앨리먼트를 붙여보쟈. (float)

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 블록 앨리먼트들을 인라인 앨리먼트들처럼 붙여보겠습니다.

사용하는것은 float 입니다.

float:(left || right);

예시입니다.

<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div>e</div>

보시면 아시겠지만..

a는 왼쪽.

b도 왼쪽이지만 오른쪽에 c가 붙어있습니다.

그 아래쪽은 e가 왼쪽, d가 오른쪽에 있습니다.

float는 설정된 장소에 있고, 다음 블록 앨리먼트를 반대편으로 끌어오는 역활을 합니다.

만약에 d를 c 오른쪽에 붙이고 싶으시다면, d의 float:right;를 지우시고, c에 float:left;를 추가하시면 됩니다.

또한 앨리먼트를 단순 좌우 정열에도 사용이 가능합니다.

d와 e처럼 말이죠.

동일한 라인의 좌우에 블록 앨리먼트가 있어야 할 필요가  있다면 float로 해결이 가능합니다.

※ Tip : 만일 d와 e를 동일한 라인에 두고 싶지 않을경우..
즉, float의 영향을 받게 하고 싶지 않을경우는, clear:both;를 사용하시면 됩니다.
<div>a</div>
<div style="float:left;">b</div><div>c</div>
<div style="float:right;">d</div>
<div style="clear:both;">e</div>

clear에는 both말고도 left, right, none 이 있습니다.

출처 : Pure Ani's Blog