[CSS] Float 속성 - 현재는 잘 사용되지 않음

float 속성에 left 또는 right 값을 주면 매우 독특한 형태와 기능을 갖게 됩니다.

먼저, 해당 요소는 '붕 뜬' 상태가 되어서, 나란히 배치된 요소들 가운데 자리를 차지하지 않게 됩니다. 때문에 다음에 오는 블록 요소들이 자리에서 밀려나지 않고, 그 아래로 들어가버리게 되죠. 그러면서도 특이하게도, 텍스트 등의 인라인 요소들은 float 요소들에 밀려나게 됩니다. 그리고 다른 float된 요소들 또한 마찬가지죠.

또한 해당 요소가 인라인일 경우 블록과 같은 속성을 갖게 되어, CSS로 높이와 너비 등을 적용할 수 있게 됩니다. 물론 float 상태가 되므로 자리는 같은 float끼리만 차지하게 되죠.

clear 속성을 이전의 float 요소들과 같이, 또는 both로 적용하면 그들 밑으로 들어가지 않고 아래로 빠져나오게 됩니다. 이전 형제들에 적용된 float의 효과를 해제하는데 clear 속성을 사용한다고 기억하시면 좋습니다.

과거에 float은 페이지 레이아웃을 잡는데 다양하게 활용되었습니다. 그러나 오늘날에는 flex 등 더 좋은 방식들이 사용되기 때문에 사라져가는 추세입니다.

 

부모의 크기 문제 해결하기

float 요소는 공간을 차지하지 않으므로, 부모 요소는 이들을 인지하지 않아 높이 계산에 적용하지 않습니다.
이 문제를 해결하는데 다음의 방법을을 사용합니다.

VS Code로 옮겨 실행한 뒤, 주석을 참고하여 실습해보세요!

 

/* 1. 마지막에 clear된 빈 블록 요소 두기 */
/* 불필요한 html 요소 추가 */
.empty {
  clear: both;
} 

/* 2. 부모에 overflow 속성 활용 */
/* 부모 밖으로 나타나야 할 요소가 있는 경우 한계 */
section {
  overflow: hidden;
} 

/* 3. 가상의 요소 두기 */
/* 가장 널리 사용되는 방법 */
section::after {
  content: '';
  display: block;
  clear: both;
}