CSS Clear 속성은 float 속성을 사용한 요소의 높이를 자동 조절하거나, float 속성이 적용된 요소 주변으로 다른 요소들이 얼마나 흐를지를 제어하는 데 사용됩니다.

예를 들어, float 속성이 적용된 요소 주변으로 다른 요소가 흐르도록 허용하고 싶지 않은 경우에 clear 속성을 사용할 수 있습니다.

Clear를 언제 사용해야 하나요?

일반적으로, float된 요소 다음에 위치한 요소에 clear를 적용하여 부유(float) 요소가 부모 엘리먼트의 높이에 영향을 미치는 것을 방지할 수 있습니다.

다른 상황에서 clear를 사용하는 예로는, float이 적용된 요소 바로 뒤에 오는 내용이 원하지 않는 방향으로 흐르는 경우, 해당 요소 앞에 clear를 추가하여 흐름을 제어할 수 있습니다.

그러나 최신 CSS 레이아웃 기술과 flexbox, 그리드 레이아웃을 사용할 때는 clear를 적용할 필요가 없는 경우가 많습니다. float과 clear 대신에 이러한 레이아웃 기술을 고려할 수 있습니다.

참고 문서: MDN Web Docs