[CSS-4] float, clear

 

1.float

요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너 왼쪽이나 오른쪽에 배치되게 한다.

• none : 기본값, 원래 상태
• left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
• right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함

div {
   float: none;
   float: right;
   float: left;
}

 

2.clear

 

 

float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소 아래로 내려가게 할 수 있다.

both 쓰면된다.

• none : 기본값, 아래로 이동되지 않음을 나태는 키워드
• left : float이 left인 요소의 아래로 내려가겠다.
• right : float이 right인 요소의 아래로 내려가겠다.
• both : float이 left 및 right인 요소의 아래로 내려가겠다. 

div {
  clear: none;
  clear: left;
  clear: right;
  clear: both;
}