정의 및 사용 방법

float 속성은 요소를 일반적인 문서 흐름에서 벗어나게 띄워(float) 왼쪽 또는 오른쪽에 배치하며,
주변의 텍스트나 인라인 콘텐츠는 그 주위를 따라 배치되도록 지정할 수 있습니다.

모든 요소에 적용할 수 있지만, position 속성이 absolute 또는 fixed로 설정된 요소에는 아무런 영향을 미치지 않습니다.

형식 구문

CSS 
selector {
    float: none | left | right | inline-start | inline-end
}

값

float 속성의 값과 의미
none 초깃값.
요소를 띄우지 않습니다.
left 요소를 띄워 요소가 포함된 컨테이너 박스의 '왼쪽' 가장자리에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.
right 요소를 띄워 요소가 포함된 컨테이너 박스의 '오른쪽'에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.
inline-start 요소를 띄워 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '시작쪽'에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.
  • 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '시작쪽'은 '왼쪽'입니다.
  • 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '시작쪽'은 '오른쪽'입니다.
inline-end 요소를 띄워 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '끝쪽'에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.
  • 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '끝쪽'은 '오른쪽'입니다.
  • 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '끝쪽'은 '왼쪽'입니다.

기본 예제

다음 예제들에서는 float 속성의 값별로 실제 적용된 모습을 구현했습니다.

HTML 예제에 사용하는 공통 HTML 
<section class="container">
    <div class="float-me">Float me</div>
    <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</section>
CSS 예제에 사용하는 공통 CSS 
.container {
    padding: 1em;
    border: 3px solid;
}
.float-me {
    padding: 1em;
    background-color: black;
    color: white;
}
p {
    color: silver;
    margin: 0;
}

float: none

초깃값입니다. 요소를 띄우지 않으며, 주변의 텍스트나 인라인 콘텐츠의 재배치에 이 속성으로 인해 영향을 끼치지 않습니다.

CSS 
.float-me {
    float: none;
}
실제 적용된 모습

float: left

요소를 띄워 요소가 포함된 컨테이너 박스의 '왼쪽' 가장자리에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.

CSS 
.float-me {
    float: left;
}
실제 적용된 모습

float: right

요소를 띄워 요소가 포함된 컨테이너 박스의 '오른쪽' 가장자리에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.

CSS 
.float-me {
    float: right;
}
실제 적용된 모습

float: inline-start

요소를 띄워 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '시작쪽'에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.

  • 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '시작쪽'은 '왼쪽'입니다.
  • 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '시작쪽'은 '오른쪽'입니다.
텍스트 방향이 LTR

텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '시작쪽'은 '왼쪽'입니다.

CSS 
.float-me {
    float: inline-start;
}
실제 적용된 모습
텍스트 방향이 RTL

반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '시작쪽'은 '오른쪽'입니다.

CSS 
.float-me {
    float: inline-start;
}

/* 시각적인 배치 방향을 오른쪽에서 왼쪽으로 변경 */
.container {
    direction: rtl;
}

direction 속성은 텍스트를 포함한 인라인 콘텐츠의 진행 방향을 설정하며,
ltr(왼쪽 → 오른쪽) 또는 rtl(오른쪽 → 왼쪽)로 지정할 수 있습니다.

실제 적용된 모습

inline-end

요소를 띄워 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '끝쪽'에 배치하고, 주변의 텍스트나 인라인 콘텐츠는 요소의 주위에 배치되도록 합니다.

  • 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '끝쪽'은 '오른쪽'입니다.
  • 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '끝쪽'은 '왼쪽'입니다.
텍스트 방향이 LTR

텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '끝쪽'은 '오른쪽'입니다.

CSS 
.float-me {
    float: inline-end;
}
실제 적용된 모습
텍스트 방향이 RTL

반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '끝쪽'은 '왼쪽'입니다.

CSS 
.float-me {
    float: inline-end;
}

/* 시각적인 배치 방향을 오른쪽에서 왼쪽으로 변경 */
.container {
    direction: rtl;
}
실제 적용된 모습

float의 display 값 계산 방식

float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 해당 요소는 문서 흐름 맥락에서 새로운 블록(영역) 상자 수준의 레이아웃을 형성하는 블록(block) 레이아웃을 사용합니다. 경우에 따라, 해당 요소는 display 속성의 계산된 값(computed value)이 변경됩니다.

아래는 지정된 display 값이 어떻게 변경되어 계산되는지를 요약한 표입니다. (이 표는 MDN - float의 일부 내용을 발췌한 것입니다.)

지정된 display 값계산된 display 값
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
inline-flex flex
inline-grid grid
그 밖의 값 변경되지 않음

float 요소의 위치 지정 방법

float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 해당 요소는 문서의 일반적인 흐름에서 벗어나게 됩니다(하지만 여전히 문서의 일부로 남아 있습니다). 이러한 요소를 float 요소라고 합니다. float 요소는 왼쪽이나 오른쪽으로 이동하여, 그 요소가 포함된 컨테이너의 가장자리에 닿거나, 다른 float 요소와 닿을 때까지 위치가 조정됩니다.

또한, 왼쪽이나 오른쪽으로 배치되는 float 요소의 상단은 이전 블록(영역) 상자 수준의 요소의 하단보다 낮은 위치에 배치됩니다.

float의 쌓임 순서

float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 해당 요소는 스스로 새로운 '쌓임 맥락(Stacking context)'을 형성하지는 않지만, 일반적인 블록 요소보다는 위에 쌓이며, position 속성이 static 값으로 설정되지 않은 요소보다는 아래에 쌓입니다.

테이블의 빈 셀(empty-cells)과 float의 관계

테이블의 셀( <td>와 <th>)에서 텍스트나 자식 요소 등 콘텐츠가 해당 셀에 아무것도 없을 때, 또는 셀에 공백 문자(Whitespace)만 포함되어 있을 때 이러한 셀을 '비어 있는(empty) 셀'이라고 합니다.

'비어 있는(empty) 셀'은 empty-cells 속성으로 테두리(borders)와 배경(backgrounds)을 표시할지 여부를 설정할 수 있는데, 해당 셀이 float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 empty-cells 속성은 아무런 영향을 미치지 않습니다.

float과 마진 상쇄(margin collapsing)

CSS에서 인접한 요소의 마진(margin) 영역(margin area)은 특정 레이아웃에서 서로 겹칠 수 있습니다. 이때 서로 맞닿으면 그중 큰 값으로 결합해서 작은 값은 상쇄(collapsing)됩니다. 이를 '마진 상쇄(margin collapsing)'라고 합니다.

하지만, float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 마진 상쇄가 발생하지 않습니다.

float 요소의 width: auto

display: block, display: flex, display: grid 등으로 설정된 요소는 일반적인 문서 흐름에 배치되어 있을 경우 요소의 너비를 지정하는 width 속성의 값이 auto일 경우 부모 컨테이너의 너비를 꽉 채웁니다.

하지만, float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 콘텐츠 크기에 맞춰 최소 크기로 계산됩니다.

구문

CSS 
/* 키워드 값 */
float: none;
float: left;
float: right;
float: inline-start;
float: inline-end;

/* 글로벌 값 */
float: inherit;
float: initial;
float: revert;
float: revert-layer;

형식 정의

float 속성의 형식 정의
초깃값 none
적용 요소 모든 요소. 단, display 속성의 값이 none으로 설정되어 있으면 아무런 효과가 없음
상속 아니오
애니메이션 아니오

브라우저 호환성

float 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
float 1 12 1 1
none 1 12 1 1
left 1 12 1 1
right 1 12 1 1
inline-start 118 118 55 15
inline-end 118 118 55 15

명세서

float 속성의 명세서 사양
명세서 사양
float Cascading Style Sheets Level 2
#propdef-float
float CSS Logical Properties and Values Module Level 1
#float-clear

참고문헌

같이 보기