Float 🛸

float 은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티다. 페이지 전체의 레이아웃을 잡을 때에도 사용 하기도 한다.

복잡한 형태의 레이아웃을 구성하는데 필요한 속성으로 특정 요소를 둥둥 뜨게 하도록 하는 속성이다.

사실 float 속성은 이전에 레이아웃을 잡는데 정말 많이 사용되던 속성이다. 요즘에는 flex 속성을 기반으로 하여 레이아웃을 잡는 경우가 훨씬 많기 때문에 float는 자주 사용 되지 않고 있다. 하지만 이전에 작성된 코드를 보는 경우도 생길 수도 있으니 기본적인 내용은 알고 가려고 한다.

float 사용하는 이유?

float의 단어뜻은 둥둥 뜨다 라는 뜻으로 해석할 수 있다. float속성을 사용하게 되면 박스를 왼쪽또는 오른쪽으로 부유 시키는 레이아웃을 생성 할 때 사용한다. 예를 들면 백과사전이나 신문기사에서 보는듯한 레이아웃을 만들 수 있다.

이러한 레이아웃을 쉽게 배치하기 위해 만든 언어다.

float의 문제점?

이러한 float에도 문제점이있어 최근에 들어 flex 속성을 주로 사용한다.

float 속성을 가진 요소는 부모(상위)요소의 높이를 인지 할 수 없어서 부모를 벗어나 clear 속성을 붙여줘야 하기 때문에 어렵고 귀찮아 자주 사용하지 않게 되었다.

이런식으로 하나하나 배치할때마다 clear속성을 붙여줘야한다.

사진 출처: 디자인베이스님 유튜브
https://www.youtube.com/watch?v=JMX9FNoB6Cg

float 속성

float 의 속성값(value)입니다.

float : value

left : 요소를 왼쪽 방향으로 부유하게 설정
right : 요소를 오른쪽 방향으로 부유하게 설정
none : 기본값(default), 요소를 띄우지 않는다.

clear

플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 된다.
이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 한다.

여기서 "float 을 해제한다" 는 의미는 float 이 적용된 요소를 해제하는 것이 아니라
clear 속성을 적용해 float 의 영향을 받지 않도록 한다는 의미다.

첫 번째 float 해제 방법

.parent { float: left; }
부모요소에게도 float 속성을 반영하는 방법이다.

이렇게 하면 부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소도 float 된 요소가 되어 인라인 블럭의 특징을 가지고 되기 때문에 상황에 맞도록 사용해야 한다.

두 번째 float 해제 방법

.parent { display: inline-block; }

이 방법 역시 부모 요소에 적용하는데 display: inline-block; 속성을 사용하는 방법이다.

부모 요소는 자식 요소의 높이를 인지하게 되지만 부모 요소에 정의된 인라인블럭 속성 특성 때문에 본인 영역만큼만 너비를 가지게 된다.

세 번째 float 해제 방법

.parent { overflow: hidden; }

세 번째 방법으로 플롯을 해제할 수 있는 속성은 overflow:hidden; 방식이다.

이 속성 역시도 부모 요소에 적용해야 하며, 이 속성의 특징은 자식 요소가 부모 요소 박스보다 클 경우에 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성이다.

동적으로 자식, 자손 요소들 중에서 부모 요소 박스를 벗어나서 보여주어야 될 경우에 hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문에 잘 판단하여 선택적으로 사용해야한다.

네 번째 float 해제 방법

이 방식은 과거에 널리 사용되던 방식으로 플롯된 요소의 마지막 요소(형제 레벨)로 빈 엘리먼트 작성하여 clear 속성을 적용하는 방법이 있다.

<div class="box-group">
    <div class="box is-blue"></div>
    <div class="box is-yellow"></div>
    <div class="box is-green"></div>
    <div class="clear"></div>
</div>

불필요한 의미없는 빈 요소를 이용하는 것이기 때문에 가장 권장되지 않는 방법이라고 한다.

flex를 애용하자.

이렇게 많은 방법으로 해제를 한다 하더라도 빈엘리먼트를 사용해서 clear를 적용을 해서 쓸데없는 코드를 더 입력 해야한다던가, overflow: auto;를 적용해서 생각하지 못했던 스크롤이 생겨 최근 많은 개발자들은 float보단 flex를 사용한다.