요소가 부모 요소의 특정 방향으로부터 겹치는 경우, clear 속성을 사용하여 겹치지 않도록 조절할 수 있습니다.

예를 들어, 부모 요소의 아래쪽에 위치한 요소가 겹치는 경우, 해당 요소에 clear: both;를 적용하여 위쪽으로부터 겹치지 않도록 만들 수 있습니다.

아래는 간단한 예제 코드입니다.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

이렇게 하면 clearfix 클래스가 적용된 요소는 부모 요소의 자식 요소와 겹치지 않게 됩니다.

더 복잡한 레이아웃에서는 다양한 clear 값과 함께 clear 속성을 사용하여 요소를 겹치지 않도록 제어할 수 있습니다.

다만, clear 속성은 주로 float 속성을 사용하는 레이아웃에서 자주 활용되며, flexbox나 grid를 사용하는 경우에는 다른 방법을 사용하는 것이 좋을 수 있습니다.

참고 자료:

• MDN Web Docs