고급 - 흐름(floating)

 

CSS float는 엘레멘트를 왼쪽이나 오른쪽으로 밀 때 사용하는 속성이다. float는 이미지에 자주 사용되며, 레이아웃을 잡을 때도 유용한다. 엘레멘트는 수평으로 흐르는데, 이 의미는 모든 엘레멘트를 왼쪽이나 오른쪽으로 흐르게 할 수 있다는 것이다. 하지만 위 아래는 흐름과는 상관이 없다.

 

float 속성을 지정하면 엘레멘트는 이동할 수 있는 영역 만큼 왼쪽이나 오른쪽으로 이동한다. 만약, 이미지에 float속성을 부여하고 다음 엘레멘트가 텍스트일 경우 이미지 주변을 감싸면서 배치된다. floating 된 엘레멘트 다음 엘레멘트는 주위를 흐르고, floating 된 엘레멘트 전의 엘레멘트는 영향을 받지 않는다. 즉, floating 된 엘레멘트 다음에 나오는 엘레멘트는 floating 된 엘레멘트를 감싸려고 하는데, 이것을 없애기 위해서는 clear:both 속성을 주면 된다.

 

 

<div>기본 엘레멘트</div>

<p>
<div style="float:left; z-index:-2;">float 속성 테스트</div>
테스트 & 테스트
</p>

 

 

 

 

 

 

 

 

■ float 속성의 값 

 

right, left, none