CSS- float

float?

• HTML과 CSS를 사용하여 웹 페이지를 디자인할 때, 요소들의 위치와 배치를 제어할 때 float속성을 사용한다.
• 여기서 float은 '떠 있다'라는 의미로 왼쪽 구석이나 오른쪽 구석에 요소를 배치시키는 속성이다.

float 속성

• none(기본값): 해당 요소를 어느쪽으로도 배치 x
• left: 해당 요소를 문서의 왼쪽으로 배치
• right: 해당 요소를 문서의 오른쪽으로 배치

float속성 사용시 주의 사항

1. 공간에 따라 요소가 띄워진 후에 다음 요소들이 어떻게 배치될지 예측하기 어렵다.

2. float 속성을 준 부모 요소는 높이 값을 잃어 자식 요소를 포함하지 못한다.

   • 해결 방법 : 부모 요소에 overflow:hidden; 속성을 줘 높이 값을 되찾게 해 떠있는 요소들을 품도록 만든다.