CSS float | clear 요소 배치와 float값 취소

CSS float 요소 배치

float은 요소를 오른쪽, 왼쪽에 배치하는 것 (띄우는 것이다)

 

기본값: none

 

속성

float: none | left | right 

none: 띄우지 않음

left: 왼쪽에 띄움

right: 오른쪽에 띄움

 

float 속성을 적용하면 다음에 오는 요소들이 해당 요소를 감싸게 된다

 

ex) 

 

 

float: right가 적용된 <h1> 다음에 오는 요소인 <p>가 <h1>을 감싼 형태

 

 

CSS clear float값 취소

clear는 float값을 취소하는 것

기본값: none

 

속성

clear: none | left | right | both

none: clear설정하지 않음

left: "float: left" 취소 

right: "float: right" 취소 

 

ex) 좌: clear 적용X / 우: clear: both 적용

 

하늘색 배경에 clear를 적용하지 않은 왼쪽 사진을 보면 

float: left와 float: right를 감싸고 있는 것을 확인 할 수 있다