8-8-4. CSS 속성 : 레이아웃-클리어(clear) {clear: none / left / right / both;}

8-8-4. CSS 속성 : 레이아웃-클리어(clear)

 

 가. clear 속성

 

  - float 속성이 선언된 요소는 주변 요소의 배치에 영향을 줌

  - clear 속성은 위와 같이 float 된 요소의 영향으로부터 벗어나 영향을 받지 않도록 하는 속성

  - 보통, 앞선 요소에 float 속성을 선언하였으면, 그 다음 요소에는 바로 clear 속성을 선언하는게 좋음

  - clear 속성과 float 속성은 항상 같이 따라다니는 속성임

  - clear 속성은 "블록레벨태그(요소)" 또는 display 속성값이 "block" 인 경우만, 적용 가능함

    ※ display의 속성값 inline-block 은 인라인레벨이므로, clear 속성 적용불가 

  - 기본값 : none

 

 나. clear 속성값의 종류

 

속성값	내용
none	ㆍ일방이나 양쪽 모두 float된 요소를 허용(기본값) ㆍ즉, float된 요소로부터 영향을 받음
left	ㆍ왼쪽 영역에 float된 요소가 위치하는 것을 허용하지 않음 ㆍ그러면, clear 속성이 선언된 요소는 개행된 것처럼 다음 행에 위치함("clear 되다"이라함)
right	ㆍ오른쪽 영역에 float된 요소가 위치하는 것을 허용하지 않음 ㆍ그러면, clear 속성이 선언된 요소는 개행된 것처럼 다음 행에 위치함("clear 되다"이라함)
both	ㆍ좌우 모두 양쪽에 float된 요소가 위치하는 것을 허용하지 않음 ㆍ그러면,clear 속성이 선언된 요소는 개행된 것처럼 다음 행에 위치함("clear 되다"이라함)