CSS / float와 overflow

float 옆의 본문에 overflow: auto를 주면 본문 상자가 float와 겹치지 않는 배치 영역을 만들 수 있습니다. 이는 overflow가 단순히 글을 잘라서가 아니라 새로운 블록 서식 맥락(BFC, Block Formatting Context)을 만들기 때문입니다. 넘침을 숨길 목적이 없다면 display: flow-root로 이 배치 효과를 더 명확하게 표현할 수 있습니다.

텍스트가 흐르는 것과 상자가 피하는 것의 차이

오른쪽에 float 요소가 있으면 일반 흐름의 텍스트는 그 요소를 피해 줄바꿈됩니다. 그러나 텍스트를 감싼 일반 블록 상자 자체가 반드시 float 옆으로 좁아지는 것은 아닙니다. 블록의 배경과 테두리는 float 뒤쪽까지 이어질 수 있고, float의 아래로 내려간 텍스트는 다시 더 넓은 줄을 사용합니다.

본문 상자가 새 BFC를 만들면 바깥 float와 상자의 테두리 영역이 겹치지 않게 배치됩니다. 그 결과 상자 전체가 옆 공간에 들어가거나, 공간이 부족하면 아래로 내려갑니다. 예전 예제에서 “overflow를 주면 가로폭 전체가 줄어든다”라고 보이던 현상은 이 규칙의 결과이며, 모든 요소의 너비를 일률적으로 줄이는 속성은 아닙니다.

전체 예제: overflow와 flow-root 비교

아래 코드를 float-overflow.html로 저장한 뒤 브라우저에서 엽니다. 앞의 세 구역은 같은 문장을 float 옆에 배치하고, 뒤의 두 구역은 부모 안에 float가 있을 때 부모 테두리의 높이를 비교합니다. 각 case의 flow-root는 실험 구역끼리 float가 간섭하지 않도록 격리하기 위한 설정입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>float와 독립된 배치 영역</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .case { display: flow-root; max-width: 500px; margin-bottom: 24px; }
    .outside { float: right; width: 100px; height: 120px; margin-left: 12px; background: #168a91; }
    .text { background: #edf3fa; border: 2px solid #6f88a4; padding: 10px; }
    .text p, .inside p { margin: 0; }
    .auto { overflow: auto; }
    .flow { display: flow-root; }
    .inside { padding: 8px; border: 2px solid #6f88a4; background: #edf3fa; }
    .inside .tile { float: left; width: 80px; height: 100px; margin-right: 12px; background: #168a91; }
  </style>
</head>
<body>
<h1>float와 overflow 비교</h1>
<section class="case">
  <h2>기본 배치</h2>
  <div class="outside"></div>
  <div class="text ">
    <p>문장은 초록 상자 주위로 흐릅니다. 본문 상자의 배경과 테두리가 어디까지 이어지는지 보세요. 같은 글이라도 배치 영역의 너비에 따라 줄 수가 달라집니다.</p>
  </div>
</section>
<section class="case">
  <h2>overflow: auto</h2>
  <div class="outside"></div>
  <div class="text auto">
    <p>문장은 초록 상자 주위로 흐릅니다. 본문 상자의 배경과 테두리가 어디까지 이어지는지 보세요. 같은 글이라도 배치 영역의 너비에 따라 줄 수가 달라집니다.</p>
  </div>
</section>
<section class="case">
  <h2>display: flow-root</h2>
  <div class="outside"></div>
  <div class="text flow">
    <p>문장은 초록 상자 주위로 흐릅니다. 본문 상자의 배경과 테두리가 어디까지 이어지는지 보세요. 같은 글이라도 배치 영역의 너비에 따라 줄 수가 달라집니다.</p>
  </div>
</section>
<section class="case">
  <h2>내부 float: 기본 부모</h2>
  <div class="inside ">
    <div class="tile"></div>
    <p>짧은 본문</p>
  </div>
</section>
<section class="case">
  <h2>내부 float: flow-root 부모</h2>
  <div class="inside flow">
    <div class="tile"></div>
    <p>짧은 본문</p>
  </div>
</section>
</body>
</html>

앞의 기본 배치에서는 파란 본문 상자의 테두리가 초록 float 뒤까지 이어집니다. overflow: auto와 display: flow-root 구역에서는 본문 상자 자체가 초록 상자의 왼쪽으로 좁아집니다. 창 너비를 줄여도 세 경우의 본문 상자 경계를 비교할 수 있습니다. 문장 줄 수에 따른 높이는 창 너비와 글꼴에 따라 달라질 수 있습니다.

부모 높이가 float를 감싸지 못할 때

뒤의 기본 부모는 짧은 본문 높이를 기준으로 테두리가 잡혀 초록 타일이 아래로 튀어나옵니다. float는 일반적인 블록 자식과 같은 방식으로 부모의 자동 높이에 포함되지 않기 때문입니다. 반면 부모를 flow-root로 만들면 새 BFC 안의 float까지 포함하도록 자동 높이가 계산되어 테두리가 타일을 감쌉니다.

직접 확인하려면 마지막 예제의 .inside.flow에서 flow 클래스를 제거하고 새로고침합니다. 부모 높이가 기본 부모와 같아지는지 본 뒤 다시 flow를 붙여 되돌립니다. float 뒤의 특정 요소를 아래로 내리려는 목적이라면 그 요소의 clear: both가 적합할 수도 있습니다. “float의 옆을 피하기”, “부모 높이에 포함하기”, “다음 내용을 아래로 내리기”를 구분해서 선택하세요.

overflow를 배치용으로 쓸 때의 주의점

overflow: auto, hidden, scroll은 일반 블록에서 새 BFC를 만들지만, 넘침을 처리하는 역할도 함께 가집니다. auto는 넘치는 경우 스크롤을 제공하고, hidden은 영역 밖으로 나간 내용이나 장식 일부를 가릴 수 있습니다. 드롭다운이나 그림자, 초점 테두리가 잘리는 문제를 감수하면서 float 정리용으로 hidden을 넣지 마세요.

overflow: clip은 그 자체만으로 새 BFC를 만들지 않으므로 hidden의 대체값으로 바꾸면 배치 결과가 달라질 수 있습니다. 배치 영역만 분리할 때는 flow-root를 우선 검토하고, 실제 스크롤이 필요할 때 overflow를 사용합니다. 페이지의 열이나 내비게이션처럼 일반 레이아웃을 새로 구성하는 경우에는 float보다 Flexbox나 Grid가 더 직접적인 도구입니다.

float의 동작은 MDN의 float 설명, 배치 영역과 넘침의 관계는 MDN의 블록 서식 맥락 안내와 overflow 설명에서 확인할 수 있습니다.