path: root/files/ko/web/css/float/index.html

---
title: float
slug: Web/CSS/float
tags:
  - CSS
  - CSS Positioning
  - CSS Property
  - Reference
translation_of: Web/CSS/float
---
<div>{{CSSRef}}</div>

<p>CSS 속성(property) <strong><code>float</code></strong> 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.</p>

<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>



<p>부동<strong>(floating) 요소</strong> 는 <code>float</code> 의 계산값(computed value)이 <code>none</code>이 아닌 요소입니다.</p>

<p>{{cssinfo}}</p>

<p><code>float</code> 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 {{cssxref("display")}} 값의 계산값을 수정합니다:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">지정값(Specified value)</th>
   <th scope="col">계산값</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>inline</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-block</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-table</code></td>
   <td><code>table</code></td>
  </tr>
  <tr>
   <td><code>table-row</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-row-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-cell</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-caption</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-header-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-footer-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>flex</code></td>
   <td><code>flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td>
  </tr>
  <tr>
   <td><code>inline-flex</code></td>
   <td><code>inline-flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td>
  </tr>
  <tr>
   <td><em>그외</em></td>
   <td><em>변화없음</em></td>
  </tr>
 </tbody>
</table>

<div class="note"><strong>주의: </strong>JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 <code>cssFloat</code>으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 <code>styleFloat</code>으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 &lt;label&gt;의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.</div>

<h2 id="구문">구문</h2>

<pre class="brush:css">/* 키워드 값 */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* 전역 값 */
float: inherit;
float: initial;
float: unset;
</pre>

<h3 id="값">값</h3>

<dl>
 <dt><code>left</code></dt>
 <dd>는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.</dd>
 <dt><code>right</code></dt>
 <dd>는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.</dd>
 <dt><code>none</code></dt>
 <dd>는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.</dd>
 <dt><code>inline-start</code></dt>
 <dd>는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.</dd>
 <dt><code>inline-end</code></dt>
 <dd>는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="예제">예제</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div { border: solid red;  max-width: 70ex; }
h4  { float: left;  margin: 0; }</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;h4&gt;HELLO!&lt;/h4&gt;
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
&lt;/div&gt;</pre>

<p>{{EmbedLiveSample('예제')}}</p>

<h3 id="float이_위치_지정되는_법">float이 위치 지정되는 법</h3>

<p>위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나<em> 다른 부동된 요소</em>의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.</p>

<p>아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).</p>

<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>

<h3 id="float_지우기">float 지우기</h3>

<p>위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.</p>

<p>이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 {{Cssxref("clear")}} 속성을 추가하는 것입니다:</p>

<pre class="brush:css">h2.secondHeading { clear: both; }
</pre>

<p>그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(<a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" rel="internal">block formatting context</a>) 내에 다른 요소가 없을 때만 동작합니다. 우리 <code>h2</code> 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, <code>clear</code> 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.</p>

<p>그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 <code>p</code> 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 <code>hidden</code> 혹은 <code>auto</code> 로 p의 {{Cssxref("overflow")}} 속성을 설정할 수 있습니다:</p>

<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
</pre>

<div class="note"><strong>주의:</strong> <code>overflow</code> 를 <code>scroll</code> 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 <code>height</code> 를 <code>auto</code> 로 설정하고 있습니다.</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td><code>inline-start</code> 및 <code>inline-end </code>값이 추가됨.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>많은 새 값이, 아직 모두 분명히 정의되지 않음. 새 기능과 관련 없는 행동의 차이는 모두 의도치 않은 걸로 예상됩니다. 그러므로 보고해 주세요.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>변화 없음</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div>{{Compat("css.properties.float")}}</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
</ul>