CSS float

float

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

float은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 display 값의 계산값을 수정합니다.

지정값(Specified value) 계산값
inline block
inline-block block
inline-table block
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
flex flex, 다만 float 은 이러한 요소에 효과가 없음
inline-flex inline-flex, 다만 float 은 이러한 요소에 효과가 없음

구문

    /* 키워드 값 */
    float: left;
    float: right;
    float: none;
    float: inline-start;
    float: inline-end;
    
    /* 전역 값 */
    float: inherit;
    float: initial;
    float: unset;

예제

    div { border: solid red;  max-width: 70ex; }
    h4  { float: left;  margin: 0; }