CSS의 float 속성은 일반 문서 흐름과 주변 텍스트 배치에 어떤 영향을 주나요?

이렇게 답해 보세요 (핵심 답변)

float가 적용된 요소는 일반적인 블록 흐름에서 벗어나 부모 컨테이너의 왼쪽이나 오른쪽 끝으로 이동하고, 뒤따르는 텍스트와 인라인 요소들이 그 주변을 자연스럽게 감싸며 흐르게 만듭니다. 이때 일반 블록 흐름과 다른 배치 규칙을 따르기 때문에, float 요소만 있는 부모 박스는 자식의 높이를 인식하지 못해 높이가 0처럼 줄어들 수 있습니다. 이를 감싸려면 부모에 display: flow-root를 지정해 새로운 블록 서식 맥락(BFC)을 만들어 주는 방법이 깔끔합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 후속 요소가 앞선 float 요소 옆에 붙지 않고 아래로 내려가게 하려면 clear 속성을 사용해 흐름을 분리합니다.
2. 과거에는 페이지 전체 다단 레이아웃에 float를 썼지만, 현재는 본문 속 이미지 주변 텍스트 감싸기에만 쓰고 전체 배치는 Flexbox나 Grid로 표현합니다.

면접에서 자주 하는 실수

float를 position: absolute처럼 주변 인라인 텍스트까지 완전히 무시하는 절대 배치 방식으로 오해하면 안 됩니다.