박스를 가로로 배치하는 float속성
float속성은 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다.
웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할때 사용한다.
만약 배치 하지 않을 경우 float:none;속성이나 clear속성을 이용한다.
-float :left;박스를 영역의 왼쪽으로 배치한다.
-float :right;박스를 영역의 오른쪽으로 배치한다.
-float :none;박스를 좌 우 어느쪽에도 배치하지 않음.
-위의 이미지에서 박스1,박스2가 박스3위에 떠있는 모습을 볼 수있는데 이처럼 float기능을 사용했을 때 박스들을 떠오르게하여
왼쪽이나 오른쪽으로 배치할 수있다.
float을 해제하는 clear속성
float이 적용된 박스는 해당 위치로부터 살짝 떨어지게 된다.
아래에 있는 박스들은 이 빈 공간을 채우기 위해 위로 치고 올라오는
현상이 생기는데, 이 현상을 막고 박스를 위에서 아래로 배치하려면
clear속성을 이용한다.
-clear : none; 기본값으로 clear속성을 사용하지 않은 것과 같음.
-clear : left; 왼쪽으로 적용된 float속성을 해제함.
-clear : right; 왼쪽으로 적용된 float속성을 해제함.
-clear : both; 모든 float속성을 해제함.
float과 clear을 이용해 3*3단 상자 만들기
float속성을 이용하면 박스를 왼쪽이나 오른쪽으로 배열할 수있는데 전체 박스에
float속성을 적용한 뒤에 다음칸으로 보내주고싶은 박스에 clear 속성을 이용하면
float속성을 없앨 수있다.
