float 속성 ! clear 속성 ! html attribute property

float 속성

 

float 속성은 웹 요소를 문서 위에 띄울 수 있습니다.

무슨 말인지 아리송 하신가요?

띄운다는 의미는 왼쪽이나 오른쪽으로 짱박아(?)둘 수 있다는 뜻입니다.

 

float 속성에서 사용할 수 있는 값은

float : left;

float : right;

float : none;

세가지가 있습니다.

 

 

 

 

예시를 보여드릴게요

이미지를 왼쪽으로 배치하려고 float 속성을 사용합니다.

그럼 그 주변을 나머지 요소들이 감싸게 됩니다.

float:left; 또는 float:right;를 지정하게 되면 width(가로사이즈)값은 컨텐츠를 표시할 때 필요한 만큼만 쓰이고 다른 요소가 옆에 들어올 수 있게끔 나머지 공간을 비웁니다. 

 

 

 

 

---

clear 속성

float 속성은 웹페이지 요소를 오른쪽 왼쪽 원하는 곳에 배치시킬 수 있지만

그 이후에 오는 요소들에게도 똑같이 속성이 적용됩니다.

그렇기 때문에 더이상 사용하지 않겠다고 알려주는 속성이 필요합니다.

그럴 때 사용되는게 clear속성 입니다

 

clear 속성에서 사용할 수 있는 값은

clear : none;

clear : right;

clear : left;

clear : both;

입니다.

float를 left로 설정했다면

clear : left;를 사용하여 무효시키고

오른쪽 왼쪽 상관없이 모두 무효시키고 싶다면

clear : both;를 사용하면 됩니다.