CSS float와 clear: 이미지 둘레로 텍스트 감싸기

float가 하는 일

float는 요소를 컨테이너의 한쪽으로 밀고, 뒤에 오는 텍스트가 그 둘레를 감싸게 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

float된 상자의 margin이 텍스트가 상자에 닿지 않게 해 줘요. 그 간격은 margin으로 조절해요. 텍스트 자체에는 float 쪽으로 margin을 줄 수 없어요.

값

inline-start와 inline-end는 글쓰기 방향을 따르기 때문에, 이걸로 만든 레이아웃은 오른쪽에서 왼쪽으로 쓰는 페이지에서 올바르게 뒤집혀요. float된 요소는 block이 되기도 해요. display: inline이 block으로 바뀌어서 span이나 img에서도 width와 height가 적용돼요.

텍스트 안의 이미지 float

고전적인 용도예요. 글 안에 이미지를 두고 텍스트가 그 둘레로 흐르게 해요. 양쪽에 하나씩 float해 볼게요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: 감싸기 멈추기

clear는 "이쪽의 앞선 float 아래에서 시작해"라는 뜻이에요. 다음 섹션의 제목처럼 float 옆에 놓이면 안 되는 요소에 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

첫 번째 제목은 float 옆으로 비집고 들어가요. 두 번째 제목은 그 아래에서 시작해요. clear는 left, right, both, inline-start, inline-end, none을 받아요.

무너지는 부모와 flow-root

float는 일반 흐름 밖에 있어서, 자식이 모두 float된 컨테이너는 흐름 안에 아무것도 없어서 높이 0으로 무너져요. 배경과 테두리가 float 위의 얇은 선으로 남아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root는 새 블록 서식 맥락을 만들고, 이 맥락은 항상 float를 감싸요. 옛 코드는 같은 결과를 위해 "clearfix"를 써요.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

overflow: hidden이나 auto도 float를 품지만, 잘라 내는 부작용이 있어요. overflow를 보세요.

float는 레이아웃용이 아니에요

flexbox와 grid가 생기기 전에는 페이지 레이아웃 전체를 float된 열로 만들었고, 곳곳에 clearfix와 너비 계산이 있었어요. 그 시절은 끝났어요. float는 가운데 정렬도, 열 높이 맞추기도 못 하고, 콘텐츠 크기가 바뀌면 깨져요. 행과 열에는 display: flex나 display: grid를 쓰고, float는 무언가의 둘레로 텍스트를 감쌀 때만 쓰세요. 텍스트를 감싸는 대신 이미지를 가운데 정렬하려면 이미지 가운데 정렬을 보세요.

모양을 따라 감싸기

shape-outside는 텍스트가 float의 직사각형 대신 모양을 따라가게 해요. float된 요소에서만 동작해요.

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

자주 하는 실수

• 높이가 0인 부모. 자식이 모두 float된 경우예요. display: flow-root를 추가하세요.
• 열이나 내비게이션에 float 쓰기. flexbox나 grid를 쓰세요.
• float: center를 기대하기. 없는 값이에요. flexbox, grid, margin: 0 auto로 가운데 정렬하세요.
• float 뒤의 콘텐츠가 감싸지 않아야 하는데 감싸는 경우. clear: both를 주거나, float와 텍스트를 flow-root 컨테이너에 넣으세요.
• 다국어 사이트에서 물리적인 left와 right 쓰기. inline-start와 inline-end를 쓰면 오른쪽에서 왼쪽으로 쓰는 언어에서 레이아웃이 뒤집혀요.