float 속성, float 속성 적용시 주의

 

 

float 속성

·       display와 position과 같이 웹 페이지의 레이아웃을 구성할 때 많이 사용하는 속성으로 이미지와 텍스트를 쉽게 배치하기 위해 만들어졌습니다.

·       float이 선언된 엘리먼트는 왼쪽 또는 오른쪽으로만 위치할 수 있고, 위아래는 불가능합니다.

·       float 이후에 오는 엘리먼트는 그 주변을 채워나가며 표시됩니다.

·       float은 이미지와 텍스트를 활용한 레이아웃에서 많이 사용되고, 또한 화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용됩니다.

 

{ float: 속성값; }

 

속성 값	설명
left	element를 왼쪽방향으로 float된 블록 박스로 만듭니다.
right	element를 오른쪽방향으로 float된 블록 박스로 만듭니다.
none	element를 float하지 않습니다.
inherit	부모 또는 상위로 부터 상속

 

 

float 속성 적용시 주의

·       float 속성을 적용하는 element는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있습니다.

·       float는 뒤에 이어지는 다른 블록 레벨 element의 박스에서도 유효하며 float속성이 해제되지 않습니다.(clear 속성으로 해제 가능)