float를 이용해 레이아웃을 원하는대로 배치할 수 있다.

FE 작업을 하면서 이미지 옆에 텍스트를 배치하거나, 여러 개의 컬럼을 만드는 등의 레이아웃을 사용할 일이 많을 것 같아 정리해보는 글이다.

float

원래의 flow에서 벗어나 엘리먼트를 둥둥 떠있게 만들 수 있다. 뒤의 block 요소가 float된 요소를 인식하지 못하고 중첩돼서 배치된다.

위 코드에는 red, green, blue 세 상자가 존재하고 있지만, green 상자에 float: left 속성이 적용되어 있기 때문에 '둥둥 떠 있다'라고 브라우저가 인식해 blue 상자가 위로 올라오고 green은 그 위에 떠 있는 모습이다.

좀 더 직관적인 예시를 살펴보면,

원래 display의 초기값인 block 되어 줄바꿈 되어있어야 할 두 요소가 한 줄에 출력되는 것
을 볼 수 있다.

구문

float에서 사용할 수 있는 키워드 값과 전역 값은 다음과 같다.

/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* 전역 값 */
float: inherit;
float: initial;
float: unset;

left : 요소가 자신이 포함되어있는 블록의 좌측에 부동해야 함(둥둥 떠야 함)을 나타낸다.
right : 요소가 자신이 포함되어있는 블록의 우측에 부동해야 함을 나타낸다.
none : 요소가 부동하지 않아야 함을 나타낸다.
inline-start : 요소가 자신이 포함되어있는 블록의 시작쪽에 부동해야 함을 나타낸다.
inline-end : 요소가 자신이 포함되어있는 블록의 끝쪽에 부동해야 함을 나타낸다.

컬럼 만들기 예시

float의 이런 특성을 사용해 이미지 옆에 텍스트를 배치하거나, 여러 개의 컬럼을 만들 수 있다. 다음은 세 개의 컬럼을 만드는 예시이다.

left, right, realright 세 개의 클래스에 각각 float: left 속성을 적용하고 width 속성을 이용해 각 컬럼의 너비를 지정해준다.

clear와 overflow

⚠️ float 속성을 지정하면 '둥둥 떠있다' 라고 인식하기 때문에 footer가 위로 올라오게 된다. 따라서 이를 방지하기 위해 clear: left 혹은 clear: both 속성을 적용시켜주어야 한다.

⚠️ overflow 속성을 이용해 float 되어 있는 엘리먼트도 인식할 수 있게 할 수 있다.

참고 자료

MDN Web Docs - float
네이버 부스트코스 웹 풀스택 - float 기반 샘플 화면 레이아웃 구성