CSS - float

박도겸·2022년 4월 20일

float

원래 float 프로퍼티는 위처럼 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성이다.

하지만, 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 같이 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있다.

float 프로퍼티는 다양한 객체를 띄워서 정렬을 하는 속성을 가진다. 요소를 정상적인 흐름에 배치하며, 부모 요소의 왼쪽 또는 오른쪽에 위치한다.
즉, 부모 요소 안에 있는 모든 내용은 float 프로퍼티를 적용한 요소의 주위에 위치한다.

float: left; 면, 부유 요소는 왼쪽에 위치하며, 웹 페이지의 내용은 오른쪽에 위치한다.
반면, float: right; 면, 부유 요소는 오른쪽에 위치하고 웹 페이지의 내용은 왼쪽에 위치한다.

float 프로퍼티를 사용할 경우 width 값을 지정하여 일관성과 가시적인 효과에 도움을 줄 수 있다.
만약 width 값을 주지 않으면, 박스가 부모 요소의 전체 너비를 차지할 수도 있다.

block 속성 태그는 row 전체의 넓이를 차지한다.
float: left; 속성을 주면 'BOX 1'에 해당하는 공간 만큼만 차지하고 다른 요소에 대해서 왼쪽으로 배치된다. float: right; 에 대해서도 동일하게 적용된다.

다양한 객체를 간편하게 띄워서 정렬하는 float 정렬에도 문제점이 존재한다.

전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이 만큼만 보여주는 문제점이 있다.

이러한 현상이 일어나는 이유는,

브라우저는 요소들을 화면에 어떻게 보여줄지 결정하는 여러가지 방법이 있다. 그 중에서 대표적으로 세 가지 방법이 존재한다. 바로 normal flow , float, position 이 있다.

대부분의 요소들, block 요소와 inline 요소들은 normal flow 에 따라 레이아웃이 결정된다.
하지만, float, position: absolute or fixed; 의 방법을 사용하면 normal flow 에서 벗어나게 된다.

이에 따라서 normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못 한다.

이를 해결하기 위해서는 세 가지 방법이 존재한다.

clear: both;

: clear 프로퍼티는 부유 박스 뒤에 나타나는 박스가 옆으로 오지 않도록 배치한다.
주로 clear: both; 를 사용하여 박스의 양쪽에 다른 요소가 위치하지 못 하도록 한다.
부모 요소에 overflow: ; 속성 추가

: overflow 는 block-formatting-contexts를 생성한다.
block-formatting-contexts는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어 준다. 그렇기 때문에 컨테이너 요소에 overflow: hidden; 혹은 overflow: scroll; 등 ~~overflow: visible;~~ 을 제외한 overflow 속성을 추가하여 해결할 수 있다.
부모 요소의 높이 값을 직접 지정

: 강제로 부모에 높이를 주어 늘리는 것이므로 좋은 방법은 아니다.
만약 자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적이다.