[CSS] CSS Float

in JavaScript

웹 페이지 레이아웃을 만들때 사용되는 CSS Float에 대해 알아보자.

CSS Float이란?

  • Float의 기본 개념

    • 요소가 normal flow에서 벗어나 부모 요소의 왼쪽 또는 오른쪽으로 이동한다.
    • 텍스트와 inline 요소들이 float된 요소 주변을 감싼다.

  • Float의 사용

    • 전통적으로 다단 레이아웃을 만드는 데 사용된다.
    • 이미지나 다른 요소를 텍스트 흐름 내에 배치하는 데 유용

Clearfix

  • Float의 문제점
    • 부모 요소 높이 붕괴 float된 요소는 부모 요소의 높이에 영향을 주지 않아 부모 요소가 높이를 잃을 수 있다.

  • Clearfix

    • 이 문제를 해결하기 위해 clearfix 기법이 사용된다.
    • overflow: auto 또는 overflow: hidden을 부모 요소에 적용한다.
    • 가상 요소 (::after)를 사용하여 float를 해제한다.
  • Clearfix 방법:
    • CSS를 이용한 Clearfix:
      .clearfix::after {
  content: "";
  display: block;
  clear: both;
}
    • 부모 요소에 clearfix 클래스를 추가하여 float 문제를 해결한다.

Clear 속성

  • 핵심 문제: 특정 요소가 바로 앞에 있는 float 요소의 영향을 받아 원하는 위치에 배치되지 않을 수 있다.
  • clear 속성의 역할:
    • 특정 요소가 이전의 float 요소 아래로 내려가도록 강제하여 float의 영향을 방지한다.
    • float 요소 다음에 나오는 요소에 주로 사용된다.

사용 예시 (clear 속성):

.element {
  clear: both;
}
  • clear: both: 왼쪽과 오른쪽의 float 요소로부터 벗어남.
  • 특정 요소 자체의 위치를 조정하기 위한 용도로 사용된다.

Clearfix VS Clear 속성

개념ClearfixClear 속성
적용 대상부모 요소가 float된 자식 요소를 감싸도록 해결특정 요소가 float 요소의 영향을 받지 않도록 해결
해결 문제부모 요소 높이 붕괴 문제특정 요소의 위치 문제
주요 방식overflow 속성, ::after 가상 요소clear: left/right/both 속성
사용 위치부모 요소float 요소 바로 다음에 나오는 요소
  • 부모 요소의 높이 붕괴 문제를 해결하려면 Clearfix를 사용한다.
  • 요소가 float의 영향을 받아 잘못된 위치에 있을 때는 clear 속성을 사용한다.

Float 사용 시 주의사항

  • Float는 레이아웃의 기본적인 도구이지만, Flexbox나 Grid와 같은 현대적인 레이아웃 기술로 대체될 수 있다.
  • 복잡한 레이아웃에서는 유지보수가 어려워질 수 있다.
  • Float의 대안:
    • Flexbox: 1차원 레이아웃에 적합하며, 요소의 정렬 및 간격 조절에 강력하다.
    • CSS Grid: 2차원 레이아웃에 적합하며, 행과 열을 기반으로 복잡한 레이아웃을 만들 수 있다.

결론

  • CSS Float는 여전히 유용한 기술이지만, 현대적인 레이아웃 기술과 함께 이해하고 사용하는 것이 중요
  • 프로젝트의 요구 사항에 따라 적절한 레이아웃 기술을 선택해야 함