[html/css] float, clear 속성

박스를 가로로 배치하는
 float 속성 

float 속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.
웹페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치 할 때 사용한다.
float 속성은 상속되지 않기 때문에 배치하고 싶은 요소에게 직접 적용하여야 한다.

초기값	none
상속여부	X

float 속성 값
left	요소를 부모 영역의 좌측에 배치한다.
right	요소를 부모 영역의 우측에 배치한다.
none	배치하지 않는다.

<style>
	div{ float : left }
</style>

<div></div>
<div></div>
<div></div>
<div></div>

---

float 속성을 해제하는
 clear 속성 

파란색 박스가 녹색 박스 뒤로 숨은 상황

float 이 적용된 박스는 해당 위치로부터 X축으로 떨어지게 되는데
float 속성이 적용되어 있지 않는 다음 박스들이 빈 x축의 공간을 채우기 위해 위로 치고 올라오는 현상이 생긴다.
이러한 현상을 막고, 박스를 다시 정렬하기 위해 사용되는 것이 clear 속성이다.

clear 속성 값
none	기본값, clear 속성을 사용하지 않은 것과 같다.
left	left가 적용된 float 속성을 해제한다.
right	right가 적용된 float 속성을 해제한다.
both	모든 float 속성을 해제한다.

+) clear 속성 추가 설명 / MDN

---

+) float 사용 시 height 값이 사라지는 현상 해결하는 방법
https://blog.naver.com/kira4195/221188151828

[CSS] float 사용 시 height 값 없어짐 방지 5가지