[CSS] clear 속성, float 속성, float 해제하는 방법(가상요소)

clear 속성은 보통 float 속성을 해제할 때 많이 사용합니다.

 

float은 블록요소를 강제로 좌우배치할 때 쓰이는데요,

하지만 float을 사용하게 되면 float이 설정된 요소는 브라우저가 높이 값을 인지하지 못하기 때문에

이때 clear을 사용해줍니다.

clear의 속성은 clear은 취소하다라는 의미를 가지고 있는 것에 걸맞게 float 값을 해제해주어 높이 값을 인식합니다.

 

* float 해제하는 방법

float을 해제하는 방법은 총 6가지 방법이 있습니다.

1. float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다. (단점 : 반응형시 자동 높이 값 설정 불가)

2. float된 요소의 부모태그에 overflow:hidden을 적용해줍니다. (단점 : 해당 요소 안의 컨텐츠를 박스 외부로 표현해줄 수 없음)

3. float된 요소의 부모태그에 overflow:auto를 적용해줍니다. (단점 : 특정 브라우저에서 스크롤 바가 표시 됨)

4. float된 요소의 부모태그에 float을 또 설정해줍니다. (단점 : 가운데 배치 불가능)

5. float된 요소의 다음에 나오는 태그에 clear:both를 지정합니다.(단점 : clear:both가 적용된 요소에는 margin-top 적용 불가)

6. float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해줍니다. **권장

 

* clear 속성

clear:none // 기본 값으로 clear를 설정하지 않은 것과 같습니다.

clear:left // 왼쪽으로 붙는 float 정렬을 취소합니다.

clear:right // 오른쪽으로 붙는 float 정렬을 취소합니다.

clear:both // 오른쪽 왼쪽 모두 붙는 float 정렬을 취소합니다.

 

* 가상요소

가상요소 ::after를 사용해줍니다.

float된 요소의 부모태그::after{

   content:'';

   display:block;

   clear:both;

}