Css #8 -float / clear

박스를 가로로 배치하는 float속성

float속성은 사전적인 의미로 '떠오르다','떠다니다'라는 의미를 가지고 있다.
웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할 때 사용한다.
만약 배치하지 않을 경우 float:none; 속성이나 clear속성을 이용한다.

• float : left ; 박스를 영역의 왼쪽으로 배치한다.
• float : rigth ; 박스를 영역의 오른쪽으로 배치한다.
• float : none ; 박스를 배치하지 않음.
  
  첫 번째 box1을 float시켰더니 box2가 치고올라온다.
  이 때 영역은 box1의 자리로 올라가지만 내용은 그대로 있어서 box2와 box3의 글자가 겹쳐 보인다.
  
  

float을 해제하는 clear속성

float이 적용된 박스는 해당 위치로부터 살짝 떨어지게 된다.
아래에 있는 박스들은 빈 공간을 채우기 위해 위로 치고올라오는 현상이 생기는데, 이 현상을 막고 박스를 위에서 아래로 배치하려면 clear속성을 이용한다.

• clear : none ; 기본값으로 clear속성을 사용하지 않은 것과 같음.
• clear : left ; 왼쪽으로 적용된 float속성을 해제함.
• clear : right ; 오른쪽으로 적용된 float속성을 해제함.
• clear : both ; 양옆으로 float속성을 해제함.
  
  
  
  

중첩 박스란?

박스에도 부모자식 관계가 있다.
감싸고 있는 박스를 부모박스라 부르고, 안에 들어있는 박스를 자식 박스라고 부른다.
중첩 박스는 곧 부모자식 관계를 가진 박스를 의미하고, 박스를 정렬하는 방법이 중요하다.