[공부] Float 사용시 발생하는 이슈, 해결법

float 이란?

float 이란 CSS에서 요소의 레이아웃을 제어하기 위해 사용되는 속성 중 하나이다.

CSS 속성 float은 '띄우다' 라는 뜻으로, 한 요소를 일반적인 레이아웃의 흐름으로 부터 띄워 수평 정령 할 때 사용하며 float 속성은 이미지와 텍스트를 함께 배치할 때 사용하며, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치된다.

현재는 Flexbox, Grid와 같은 더 효과적인 레이아웃 기술들이 있다.

Flexbox란?

1차원

display 속성중 하나로 컨테이너들의 레이아웃, 정렬, 간격설정을 하는데 효과적이며 다루고자 하는 아이템들의 사이즈를 모르거나 크기가 유동적이여야 하는 상황 에서 유용하게 사용한다.

Grid란?

2차원

부모 요소와 자식 요소로 구분되며 부모 요소를 Grid Container, 자식 요소를 Grid item으로 부르며 부모는 Grid의 영향을 받는 전체 공간을 의미하고 설정된 속성에 따라 각각의 자식들이 배치된다.

부모 요소의 높이 문제

float 을 사용하면 요소가 떠오르기 때문에 부모 요소의 높이가 사라질수 있다. 이로 인해 부모 요소가 자식 요소를 감지하지 못하고 레이아웃이 깨지는 문제가 발생할 수 있다.

해결방법

부모 요소에 overflow: hidden 을 적용하여 높이를 재설정 할 수 있다. 또는 Flexbox, Grid 레이아웃을 사용하여 float 없이도 레이아웃을 효과적으로 조정할수있다.

다른 요소와 겹치는 문제

float 을 사용하면 다른 요소들과 겹칠수 있다. 예를들어 텍스트가 float 으로 인해 이미지 주위로 감싸지는 경우, 다른 요소들이 해당 텍스트에 겹치는 문제가 발생할수있다.

해결방법

clear 속성을 사용하여 float 을 적용한 요소의 좌우측을 모두 클리어하도록 설정하면 겹침을 방지할 수 있다.

.clearfix {
  clear: both;
}

오래된 브라우저 호환성

float 은 오래된 브라우저에서는 다루기 어려울 수 있으며 레이아웃을 깨뜨릴 수 있다.

해결방법

현재는 Flexbox, Grid와 같은 레이아웃 기술이 지원되므로 float 대신 이러한 레이아웃 기술을 사용한다.

float 요약

float 을 사용할 때는 부모 요소의 높이 문제와 다른 요소와의 겹침 문제 등을 주의해야 한다.