이번 post에서는 float 를 이용한 block element를 가로로 배치하는 방법에 대해서 알아보겠습니다.
Contents
Using Float
Float property는 원래 text와 함께 image를 보여줄 때, image를 어떻게 띄워서(float) 배치할 것인지를 설정하기 위한 것이지만, 현재는 layout을 배치할 때 주로 사용됩니다. Float property는 다음과 같은 값을 가질 수 있습니다.
- left: 해당 element의 container의 왼쪽에 띄워서 배치합니다.
- right: 해당 element의 container의 오른쪽에 띄워서 배치합니다.
- none: 해당 element가 띄워지지 않습니다. 단지 원래 있어야 할 자리에 위치합니다. default 값입니다.
- inherit: 해당 element는 자신의 부모와 같은 float값을 가집니다.
See the Pen rooLyW by Heekyum Kim (@shlrur) on CodePen.
The clear Property
Clear property는 float property를 사용할 때 함께 사용하는 property로서, 해당 element의 왼쪽, 오른쪽 혹은 양쪽에 다른 element가 올 수 있는지 없는지를 결정합니다. Clear property는 다음과 같은 값을 가질 수 있습니다.
- none: 양쪽모두 element들이 float할 수 있습니다. default 값입니다.
- left: 해당 element의 왼쪽에 element들이 float할 수 없습니다.
- right: 해당 element의 오른쪽에 element들이 float할 수 없습니다.
- both: 양쪽모두 element들이 float할 수 없습니다.
- inherit: 해당 element는 자신의 부모와 같은 clear값을 가집니다.
Clear property는 float property를 사용한 후 가장 흔하게 사용합니다.
Float에 clear를 할 때, float에 맞춰서 clear를 잘 사용해야 합니다. 무슨 말이냐면, A element 를 왼쪽으로 float 시키려면, 다음 element인 B element 의 왼쪽을 clear 해야 합니다. 그러면 A element 는 왼쪽에 float 되고 clear 된 B element 는 아래에 위치하게 될 것입니다.
See the Pen XoLVzb by Heekyum Kim (@shlrur) on CodePen.
The clearfix Hack
만약 어떤 float element가 자신을 감싸고 있는 container element보다 높이가 클때는(taller), container element의 바깥으로 overflow 됩니다.
그럴때는 아래 코드와 같이 overflow: auto;를 사용합니다.
See the Pen EraXRw by Heekyum Kim (@shlrur) on CodePen.
overflow: auto; clearfix는 margin과 padding을 적절히 사용한다면 잘 작동합니다.
아래의 코드는 ::after를 사용하는 최근의 clearfix로서, 더 안정적으로 사용할 수 있습니다.
See the Pen RvNZwm by Heekyum Kim (@shlrur) on CodePen.
Layout
See the Pen jdELLw by Heekyum Kim (@shlrur) on CodePen.
위의 코드는 float를 사용해서 layout을 정의한 것입니다.
header-menu의 li tag를 float를 사용해서 horizontally하게 배치하고 있습니다. 그리고 .clearfix::after 를 사용해서 .column .menu와 .column .content를 horizontally하게 배열하고 있습니다.