Float
CSS float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다.
복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다
다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.
이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.
codepen의 Result 창의 하단에 0.5배의 크기로 확인하자.
float 기본 사용법 익히기
기본적으로 html 요소들은 위에서 아래로 수직으로 쌓이며 수평정렬을 위해서 float 속성을 사용할 수 있다.
그러나 위의 경우 item들이 container에 정상적으로 포함되지 않은 상태로 정렬되어진 것을 볼 수 있다.
float 속성을 사용하면서 가장 주의해야 할 점은 float 속성을 통한 정렬 후 항상 float에 대한 해제(clear)가 이루어져야 정상적으로 container에 item들이 정렬된 상태로 포함되어진다.
가상요소선택자 after를 활용하여 container의 내부요소 마지막에서 float을 해제한 모습을 볼 수 있다.
하지만 여기에서 정렬을 원하지 않는 item을 같은 container에 포함시킨다면 즉, 정렬을 원하는 item들과 정렬을 원하지 않는 item들이 형제요소를 이루게 된다면 다음과 같이 우리가 원하는 정렬이 이루어지지 않은 container의 모습을 확인할 수 있다.
이러한 문제에 대하여 우리는 정렬이 필요한 item들을 또 다른 container로 분리하여 해결할 수 있다.
float의 양방향 정렬을 원하는 순서로 배치하기
다음은 float의 left 정렬과 right 정렬의 혼합 사용의 경우를 확인해보도록 하자.
결과는 우리가 원하는 1, 2, 3, 4의 순서가 아닌 1, 2, 4, 3의 순서를 볼 수 있다. 이는 맨 왼쪽과 맨 오른쪽에 요소들이 순차적으로 쌓이는 것을 알 수 있다.
이처럼 또 다시 container를 분리하여 우리가 원하는 순서의 레이아웃을 구현할 수 있으며 item들이 쌓이는 구조에 대한 이해를 하며 레이아웃을 구상하는 것이 중요하다.
float을 통한 요소의 display 변화
inline 요소는 최소한의 너비와 높이 값을 유지하려고 하며 명시적인 너비와 높이 값을 가질 수 없는 특성이 존재한다. 하지만 float 속성을 가지게 된다면 inline 요소가 암묵적으로 block 요소로 바뀌게 되며 다른 형태를 가질 수 없게 되며 다음과 같이 명시적인 너비와 높이 값이 반영이 되어 나타남을 볼 수 있다.
하지만 여기서 주의할 점은 float 속성을 적용하더라도 flex, grid 등의 display 값은 block 형태로 바뀌지 않는다는 점이다.
참고자료
