[CSS] float 속성 (요소를 떠 있게 하는 속성)

float : 해당 요소를 다음 요소 위에 떠 있게하는 속성 

 

기본 구문

.element {
  float: value;
}

 

속성(value)

• left : 요소를 왼쪽으로 띄운다.
• right : 요소를 오른쪽으로 띄운다.
• none : 띄움을 해제한다. (기본값으로 설정)

 

예를 들면 text 요소랑 float 요소가 있을때 left 정렬을 하면 다음과 같이 보이게된다.

 

즉, 요소를 띄워서 왼쪽에 정렬 시키게되니깐 왼쪽 오른쪽 서로 배치된게 아닌 가리는 형태가 된다.

그래서 float 요소를 사용하고 다음 위치에 요소를 배치하고 싶다면 clear 속성을 사용해야한다.

 

clear : float 속성이 적용된 요소의 다음 요소들이 겹치는 현상을 방지하기 위해 사용하는 속성 

즉, 이후의 요소가  float 속성에 영향을 받지 않도록 설정하여 요소들이 float 속성이 적용된 요소 아래 위치하게 만든다.

 

속성(value)

• none : clear를 설정하지 않은 기본값  
• right : float right를 취소 (왼쪽에 띄워진 요소 다음에 위치하게 함)
• left : float left를 취소 (오른쪽에 띄워진 요소 다음에 위치하게 함)
• both : left , right 둘 다 취소시킨다 (왼쪽/오른쪽에 띄워진 요소 다음에 위치하게 함)