[CSS] float 속성과 문제 해결 방법

📌 float 속성이란?

: 요소의 배치를 제어할 때 사용하는 속성

종류 (5가지)

• left : 태그를 왼쪽에 붙임
• right : 태그를 오른쪽에 붙임
• none : 레이아웃을 정렬하지 않음
• initial : 기본값으로 초기화 상태
• inherit : 상위 태그의 정렬 속성을 상속받아서 정렬시킴

<!--왼쪽부터 가로로 정렬 -->
float: left; 
<!--오른쪽부터 가로로 정렬 -->
float: right

float는 영역지정 필수( width, height 지정하기)

---

📌 float 속성의 문제점

: 모든 자식 요소에 float 속성을 적용하면, 부모 요소는 해당 자식 요소가 존재하지 않는 것으로 판단하여, (부모가) 높이를 인식하지 못하는 문제가 발생함

(👉일단 부모에 높이를 줘보자👉그래도 안 되면 아래 방법으로!)

---

📌 문제 해결법 3가지

[ 해결법 1 ]

: float를 적용한 자식의 부모에게 "overflow: hidden;"을 적용한다

/* 부모 요소 */
.parent { overflow: hidden; }
/* 자식 요소 */
.child1 { float: left; }
.child2 { float: left; }

[ 해결법 2 ]

: 맨 뒤에 float가 해지된 (내용이 없는)빈 자식을 만든 후, 부모(태그)에게 적용한다

.clear:after { /* 맨 뒤를 뜻하는 선택자 */
 content: ""; /* 내용 없음 */
 display: block; /* block의 성질을 가지고 있는 자식을 만듦 */
 clear: both; /* float의 left, right 모두 해제 */
 }

<!-- html 적용 -->
<div id="parent" class="clear">
  <div class="child1">box1</div>
  <div class="child2">box2</div> <!-- child2 = 내용이 없는 빈 자식 -->
</div>

✔ 주의
[해결법 1, 2]는 부모가 float를 적용하지 않은 다른 자식들을 포함한 경우는 적용되지 않음
(= 모든 자식이 float 속성을 갖고 있어야 함)

[ 해결법 3 ]

: float를 적용한 요소들 다음에 오는 요소(빈 자식이 아니어도 됨)에 직접 "clear: both;" 속성을 적용한다

.child1 { float: right; }
.child2 { clear: both; } /* float를 적용한 요소(child1) 다음에 오는 요소 */

---

📌 가장 간단한 방법?

가장 간단하고 방법은 [ 해결법 1 ]로 자식 요소에 float 속성을 넣은 다음, 부모 요소에 "overflow: hidden;"만 추가하면 된다!

많이 쓰이는 방법은 [ 해결법 2 ]로 약간 복잡하지만 setting file을 1개 만들어 놓고 여러 파일에 활용하면 되기 때문에 편리하다고 볼 수 있다!

이 복잡한 float 문제 해결법이 필요없는 flexible box의 고마움을 느낀 순간이었다,,

---

📚 Reference

: 국비지원 수업