Properties

Properties

Editing
  • account_tree
  • bug_report

float

요소의 위치를 기본 흐름에서 벗어나 부모 요소를 기준으로 왼쪽이나 오른쪽으로 위치시킬 수 있다.

설명

float 속성은 CSS2 때 문서의 특별한 레이아웃을 생성하기 위한 목적으로 만들어졌다. 일반적으로 웹 문서의 콘텐츠는 일반 문서의 콘텐츠와 동일한 방식으로 전체적으로 좌에서 우로, 상에서 하로 전개된다. 이러한 단순한 전개는 잡지 수준의 복잡한 편집처럼 디자인하기는 어렵다.

float를 가진 요소는 라인상에서 왼쪽이나 오른쪽으로 독립적인 공간을 형성한다. float된 컨테이너는 부모 컨테이너의 display 성질에 따라 위치를 잡는 기준이 정해진다. 부모 컨테이너의 display 값이 inline 수준이 아니라면 부모 컨테이너 내에서 왼쪽 또는 오른쪽으로 위치를 잡는다. 그리고 컨텐츠의 크기 또는 명시적인 크기 지정에 따라 공간을 갖는다. 이후의 콘텐츠는 float된 컨테이너 주변에 둘러 쌓이게 된다. 만약에 이후의 컨테이너가 block 수준의 요소라면 컨테이너의 위치는 float된 요소와는 무관하게 float된 요소의 직전 요소 다음에 흐름을 가지게 되나 내부의 inline 컨텐츠들은 float된 요소 주위로 둘러쌓이게 된다.

사용 가능한 값 타입

〈'float'〉

요소를 부동시키기 위한 값들이다.

  • left | right | none | inherit
    CSS2.0
  • inline-start | inline-end
    CSS Logical Properties and Values Level 1

사용되는 키워드

  • inline-end

    인라인(inline)의 끝을 의미하며 기존의 right 개념과 동일하다.

  • inline-start

    인라인(inline)의 시작을 의미하며 기존의 left 개념과 동일하다.

  • left

    요소를 왼쪽으로 부동시킨다.

  • none

    요소를 부동처리 하지 않는다.

  • right

    요소를 오른쪽으로 부동시킨다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • float none | left | right;CSS1

    요소의 기본 위치를 지정된 상수에 따라 변경한다.

  • object.style.cssFloat = "left";CSS1Unapplied
    자바스크립트 형식

테스트 도구

float 값을 통해 출력하는 위치 테스트

버전 명세

Modules
Module NameStatusSummary
CSS2.0

Last review date: 2022-6-4

CSS Logical Properties and Values Level 1초안 작업

Last review date: 2022-8-23

기술 문서

흔히 float 속성은 부유라는 표현을 쓴다. 어느 정도 이 표현은 맞는 듯 하다. 수영장이 있다고 가정하자. 이 수영장에 작은 탱탱볼을 뿌려놓았다. 그리고 누울수 있는 넓직한 에어 메트리스를 띄웠다고 생각하자. 그리하면 어떻게 되겠는가? 탱탱볼은 에어 메트리스에게 자리를 내주면서 에어 메트리스를 둘러싸며 자리를 잡을 것이다.

수영장을 body, 수영장에 부유된(떠 있는) 에어 메트리스를 div, 수영장을 가득 채운 탱탱볼을  body 안에 존재하는 또다른 콘텐츠라고 하자. 수영장 좌측이나 우측에 떠있는 에어 메트리스는 탱탱볼과 관계없이 자유롭게 누워서 일광욕을 즐길수 있는 공간을 제공받듯이 float된 div는 body 내에서 독립적인 공간을 보장받는다. 그리고 수영장에  떠있던 탱탱볼들은 자기들끼리 알아서 에어 메트리스 주변으로 위치하듯이 body 안에 있는 콘텐츠들은 float 된 div가 차지하는 공간을 둘러싸는 형태로 위치하게 된다.

다음 그림을 보자. 왼쪽과 오른쪽에 진한 파란색 공간을 갖는 박스가 각각 float 값을 left, right를 갖는다면 그렇지 않는 요소의 콘텐츠들은 수영장이라는 공간을 가지고 있지만 float된 박스로 인해 공간을 내주면서 그 주변을 감싸는 형태로 출력이 되고 있다.

이 상황을 실제로 코드로 확인해 보자.

연관 목록

지원 웹브라우저