float 속성의 역할

float 속성은 무엇인가?

float는 CSS의 일부로, 위치 지정 속성이다
요소의 흐름에서 떠있는 위치를 지정하는 데 사용되고,
주로 이미지와 텍스트를 정렬하거나 요소를 배치하는 데 활용된다

🔎 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다
🔎 요소는 문서의 흐름에서 제외(===부유)되게 된다
🔎 다른 요소들까지 똑같은 속성이 전달되어 float을 적용한 요소 이후에
  오는다른 요소들까지 둘러싼 형태가 되거나 부유된 영역 아래로 들어간다

float 속성의 용도는 무엇인가?

float 속성을 사용하면 요소가 요소간의 흐름에서 벗어나고,
주변 요소들이 그 주위에 흐르게 된다

💡 그럼으로써 얻을 수 있는 이점?

 주위에 흐르게 한다는 것은
 즉, 요소들은 다양한 배치와 조합이 가능해지며,
 웹 페이지나 문서의 디자인과 레이아웃을 보다 유연하게 구성할 수 있다는 것을 의미한다
 예를 들어, 이미지 또는 기타 요소를 시각적으로 보여줄 수 있다

float 속성의 값

다음과 같은 값들을 가질 수 있다

🔎 left: 요소를 왼쪽으로 떠있도록 설정한다
🔎 right: 요소를 오른쪽으로 떠있도록 설정한다
🔎 none: 요소를 흐름에 따라 배치한다(기본값)
🔎 inherit: 부모 요소로부터 float 속성을 상속받는다

float의 문제점

float된 요소는 일반적으로 주위의 텍스트나 다른 요소들을 무시하고 흐름에서 벗어나기 때문에
부모 요소가 그 높이를 고려하지 않으면 부모 요소의 높이가 0이 되어버리는 문제가 발생할 수 있다 즉, 요소들이 겹치거나 레이아웃이 깨지는 문제점이 있을 수 있다
이러한 문제점을 float collapse 라고 한다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

💡 그럼 해결 방법은?

 float를 해제하거나
 BFC를 생성하면 된다

float를 해제

float를 해제한다는 것은?
float된 요소의 영향을 해제하여
해당 요소 다음에 오는 요소들이 정상적인 흐름에 따라 배치되도록 하는 것을 의미한다
그럼으로써 속성이 적용된 요소가 흐름에서 벗어나지 않고
주위의 텍스트나 다른 요소들과 겹치지 않도록 할 수 있다

float를 해제하는 방법

---

clear: both

• float된 요소의 영향을 해제하여, 해당 요소의 이전 요소에게 float된 요소의 영향을 받지 않도록 한다
• float 요소 이후 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려갈 수 있다

::after + clear: both

• float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해준다
• 부모의 태그 뒤에 내용이 텅텅 빈 content: ““ 블럭 display: block 을 만들고 clear: both로 clearfix 시킬 수 있다

💡 clearfix 란?

 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여
 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix 라고 한다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ p 요소만 float 속성이 해제되어 부유한 박스 아래로 내려가는 것을 알 수 있다

BFC를 생성

Block formatting context

블록 서식 문맥이라고 한다

html태그는 최상위 태그에 속하기 때문에 자기 자식들의 높이, 너비, 위치 등을 알아야한다
때문에 하나의 페이지에서 독립적인 영역으로 나타나있는데,
이것을 Block formatting context 라고 말할 수 있다

위에서 말했듯이 새로운 문서를 시작한다는 것은,
body영역안에 overflow속성이 지정된 요소가 새로운 Block formatting context가 된다는 것이다

💡 Block formatting context가 되면 무슨 일이?

 독립적인 영역이 만들어지기 때문에 float된 요소와 전혀 영향을 주고받지않을 수 있다
 자식들의 높이 만큼 새로운 독립된 영역을 갖게 된다 === 높이를 되찾아 다시 요소들을 품을 수 있다

🔍 그렇다면, 무엇에 의해 생성되는가? 블록 서식 문맥(bfc)은 다음 중 하나에 의해 생성된다

 ◼ 루트(html) 또는 이를 포함하는 요소
 ◼ 절대위치로 지정된 요소
 ◼ 인라인블록
 ◼ flex box
 ◼ overflow가 visible이 아닌 요소

BFC를 생성하는 방법

---

overflow

overflow를 통해 바로 이 bfc를 생성할 수 있다
overflow란 일정 영역을 벗어나는 부분을 보이지 않게 하는 스타일 속성이다
레이아웃을 구성할 때 float 속성과 자주 함께 사용된다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

질문

✨ float 속성이 무엇이며 어떤 용도로 사용되나요?

float는 css의 위치 지정 속성으로,
웹 디자인에서 요소를 좌우로 띄워서 텍스트나 다른 요소가 주위를 감싸는 방식으로 배치하는 데 사용됩니다.
예를 들어 이미지를 텍스트 주위로 둘러싸는 데 자주 활용됩니다.
뿐만아니라 다단 레이아웃을 구성하거나 복합적인 디자인을 구현하는 데에도 유용하게 사용될 수 있습니다.

✨ float을 사용하면 어떤 문제가 발생할 수 있나요?

float된 요소는 다른 요소들을 무시하고 흐름에서 벗어나기 때문에
부모 요소가 그 높이를 고려하지 않으면 부모 요소의 높이가 0이 되어버리는 문제로
float collapse 현상이 발생할 수 있습니다
즉, float을 사용하면 요소 간 겹침이나 정렬 문제가 발생할 수도 있습니다.

✨ float을 해제하는 방법은 무엇인가요?

float을 해제하기 위해서는 부모 요소에 overflow: hidden; 속성을 적용하거나,
부모 요소에 clear: both; 속성을 추가하여 float된 요소의 영향을 제거할 수 있습니다.
또한 가상 요소 ::after 또는 ::before 를 사용하여 float 해제 요소를 생성할 수 있습니다

✨ float을 대체할 수 있는 다른 CSS 속성이나 기술은 무엇인가요?

float의 대안으로는 Flexbox와 CSS Grid가 있습니다.
Flexbox는 1차원 레이아웃을 위해 사용되며,
요소들을 행 또는 열로 정렬하고 간격을 조절할 수 있는 방법을 제공합니다.
CSS Grid는 2차원 그리드 레이아웃을 위한 도구로,
행과 열의 구조를 설정하여 복잡한 레이아웃을 생성할 수 있습니다.
이러한 기술들을 이용해서 float 없이도 더 강력하고 예측 가능한 레이아웃을 구성할 수 있습니다.