Properties

Properties

Draft
  • account_tree
  • bug_report

float

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

설명

기본 흐름에서 벗어날 수 있지만 기본 흐름을 갖고 있는 주변 요소 내의 출력 콘텐츠의 영역을 보장해준다.

설정 가능한 속성 값

  • none기본값상수CSS1

    기본 값으로 요소를 float 처리하지 않는다.

  • left키워드CSS1

    요소를 왼쪽으로 붙힌다.

  • right키워드CSS1

    요소를 오른쪽으로 붙힌다.

  • initial키워드CSS3

    CSS의 기본 값으로 설정한다.

구문

  • float none or left or right or initial ;기본형식CSS1Unapplied
    요소의 기본 위치를 지정된 상수에 따라 변경한다.
  • object.style.cssFloat = "left";자바스크립트 형식CSS1Unapplied
    자바스크립트 형식

테스트 도구

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

기술 문서

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

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

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

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

연관 목록

지원 웹브라우저