• (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다
• 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치 되게 합니다.
• left: 왼쪽으로
• right: 오른쪽으로
• none: 기본값

<aside> 💡 float는 블록 레이아웃을 사용을 뜻하기도 합니다! inline, inline-block 요소에 float 속성을 주게되면 block으로 계산되어 적용됩니다.

</aside>

float 해제하기

• clear

.box {
	clear:both;
}

주의할 사항

• 자식 요소들이 모두 float 속성을 가지게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의해야 합니다.

해결 방법

1. 부모에게 높이 값 지정하기
2. overflow:hidden

.container{
	overflow:hidden;
}

1. clear-fix 방법

• 부모의 가상 요소 ::after 를 사용하는 방법입니다.

.container::after{
  content:'';
  display:block;
  clear:left;
}

float - CSS: Cascading Style Sheets | MDN