CSS 흐름속성(Flow Property) - Float, Clear

CSS 속성중에 문서의 흐름과 관련된 속성들을 알아봅니다.

float

박스가 흐르는 방법 및 방향을 지정한다. 이 속성은 절대 위치를 갖는 요소에는 적용되지 않는다.

.left {float: left;}
.right {float: right}

.left

.right

속성값

• left : 요소를 좌측으로 float 시킨다.
• right : 요소를 우측으로 float 시킨다.
• none : 요소를 float 시키지 않는다. 기본값이다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.cssFloat="left"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

float로 레이아웃을 구성하다보면 예기치 못한 문제에 부딪히곤 하는데 관련하여 float 레이아웃 문제 해결을 참고하기 바란다.

clear

다른 요소가 인접할 수 없는 요소의 측면을 지정한다. float 속성으로 인해 변화된 흐름을 원상태로 되돌린다. 흐름이 한번 변화되면 이후 등장하는 요소들에도 모두 흐름에 영향을 받기 때문에 clear 속성을 적당한 위치에 사용해줘야 한다.

img {float: left;}
p.clear {clear: both;}

속성값

• left : 좌측면의 흐름을 제거한다.
• right : 우측면의 흐름을 제거한다.
• both : 좌우 양측의 흐름을 제거한다.
• none : 기본값으로 좌우 양측의 흐름을 허락한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.clear="left"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.