CSS- float

 float 속성은 기존의 레이아웃 흐름에서 벗어나서 요소를 다음 요소 위에 떠오르게 할 수 있으며 3가지의 속성 값을 가질 수 있습니다. 

 

none 

 

예시

float: none; 선택한 요소를 떠오르게 하지 않는다

 

left

 

예시

float: left; 선택한 요소를 왼쪽 부터 떠오르게 한다

 

right

 

예시

float: right; 선택한 요소를 오른쪽 부터 떠오르게 한다

 

Clear 속성

 

clear 속성은 float 속성이 적용된 요소의 영역으로부터 벗어나게 할 수 있는 속성입니다. 즉, 두 요소 간에 겹치지 않도록 할 수 있습니다. float 속성을 적용했을 때 의도치 않게 요소의 영역들끼리 겹쳤을 때 유용하게 사용할 수 있습니다. clear속성은 4가지 값을 가질 수 있습니다.

 

none

 

clear:none 기본값

 

right

 

clear:right 오른쪽 float 요소에서 벗어남

 

left

 

clear:left 왼쪽 float 요소에서 벗어남

both

 

clear:both 양쪽 float 요소에서 벗어남