html style css float 속성

html style css float 속성

float 속성이란?

복잡한 형태의 레이아웃을 구성하는 데 필요한 핵심 속성인 float 속성은 특정 요소를 떠 있게 하는 것입니다. 여기서 떠 있다 는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다. float 속성을 사용하면 특정 요소가 주변 요소와 자연스럽게 어울리도록 할 수 있습니다. float 속성을 사용할 때 요소의 위치가 고정되면 안 되기 때문에 position 속성의 absolute를 사용하면 안 됩니다.

float 속성에서는 네 가지의 속성을 사용할 수 있습니다.

• inherit – 요소를 감싸는 부모 요소의 float 속성을 상속받습니다.
• left – 요소를 왼쪽으로 이동시킵니다.
• right – 요소를 오른쪽으로 이동시킵니다.
• none – 요소를 떠 있게 하지 않습니다.

이 중 가장 많이 쓰이는 속성은 left와 right입니다. 

float:left  테스트: https://jsfiddle.net/damianjj/wrvjtp8o/

float:right 테스트: https://jsfiddle.net/damianjj/wrvjtp8o/3/

float:none 테스트: https://jsfiddle.net/damianjj/wrvjtp8o/4/

float 미사용 테스트 : https://jsfiddle.net/damianjj/wrvjtp8o/2/

정렬

float 속성을 사용한 정렬에 대해서 살펴보겠습니다. float 속성을 사용하지 않으면 요소들이 수직으로 출력됩니다. float:left 속성을 사용하면 왼쪽부터 정렬되고, float:right 속성을 사용하면 오른쪽부터 정렬되어 출력됩니다.

float:left 사용 정렬 테스트: https://jsfiddle.net/damianjj/wrvjtp8o/5/

float:right 사용 정렬 테스트: https://jsfiddle.net/damianjj/wrvjtp8o/6/

레이아웃 구성

float 속성을 사용한 레이아웃 구성에 대해서 살펴보겠습니다.

float:left, float:right 사용하여 좌우로 밀착 테스트 : https://jsfiddle.net/damianjj/wrvjtp8o/7/

clear 속성이란?

clear 속성은 float 속성이 적용되는 것을 원치 않는 요소에 사용하여 float 속성을 초기화하는 것입니다. clear 속성은 오직 float 속성에만 적용되는 속성입니다. float:left를 사용했다면 clear:left로 초기화시키고, float:right를 사용했다면 clear:right로 초기화시킵니다. float 속성값이 left 인지 right 인지에 상관없이 무조건 초기화시키고 싶다면 clear:both를 사용하여 초기화시킵니다. 그래서 보통 clear:both를 많이 사용합니다.

float:left, clear:left 테스트 : https://jsfiddle.net/damianjj/wrvjtp8o/9/

참고: http://www.nextree.co.kr/p8796/