float property는 해당 HTML 요소가 그 주위를 감싸는 컨테이너의 좌우측을 따라 배치되어 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이러한 특성 때문에 현재는 레이아웃을 배치하는 용도로 주로 쓰이고 있습니다.
float 속성값에는 다음과 같은 것들이 있습니다.
• left : 요소를 왼쪽 방향으로 설정
• right : 요소를 오른쪽 방향으로 설정
• none : 기본값(default)
그런데 float 속성을 가진 요소는 상위 요소의 범위를 넘는 경우가 존재합니다. 이를 해결하기 위해서는 다음과 같은 방법들을 사용합니다.
1. 다음 요소도 float으로 설정
그 다음 요소 역시 float 상태로 바꿔주면 두 요소 모두 float 속성을 띄기 때문에 문제가 해결됩니다. 하지만 다음 요소의 경우에도 같은 방법을 적용해야 하기 때문에 근본적인 해결법이라고 볼 수는 없습니다.
2. 상위 요소에 overflow:hidden 사용하기
하위 요소가 float인 상위 요소에게 overflow:hidden을 주는 방식입니다. 이 방식의 경우, 내용물이 넘치게 되면 보이지 않는 단점이 있습니다.
3. 빈요소에 clear:both 넣기
float속성이 적용된 요소 밑에 빈 임의의 요소를 만들어 clear:both를 줍니다. clear는 취소하다는 뜻으로 float를 취소시킵니다.
4. 가상요소 ::after 사용하기
상위 요소에게 ::after를 사용하며 가상 요소를 만들어 준 뒤, 가상 요소에게 display:block 요소를 적용해 한 줄에 가득차게 만듭니다. 그 후 빈 콘텐츠를 넣어주고, clear를 적용시킵니다. 상위 요소 뒤에 보이지 않는 가상요소가 만들어졌기에 다른 요소가 위로 따라 올라가지 않게 해줍니다.
