CSS에서의 오버플로우(overflow)와 클리어(clear) 속성은 레이아웃과 컨텐츠의 표시 방식을 제어하는 데 유용합니다. 이 포스트에서는 오버플로우와 클리어 속성의 활용법에 대해 알아보겠습니다.

1. 오버플로우(Overflow) 속성

오버플로우는 박스의 내용이 너무 커서 해당 영역을 벗어날 때의 처리 방식을 지정하는 속성입니다. 다음은 오버플로우 속성의 값과 활용법입니다.

1.1. visible

기본값으로, 내용이 오버플로우할 경우에도 그 내용이 레이아웃을 벗어나 표시됩니다.

.example {
  overflow: visible;
}

1.2. hidden

내용이 오버플로우할 경우, 해당 영역을 벗어난 부분은 표시되지 않습니다.

.example {
  overflow: hidden;
}

1.3. scroll

내용이 오버플로우할 경우, 스크롤 바로 해당 영역을 스크롤하여 볼 수 있습니다.

.example {
  overflow: scroll;
}

1.4. auto

내용이 오버플로우할 경우에만 스크롤 바가 표시되어 해당 영역을 스크롤할 수 있습니다.

.example {
  overflow: auto;
}

2. 클리어(Clear) 속성

클리어는 띄어진 요소나 부모 요소의 자식 요소 중에서 플로팅된(floated) 요소의 영향을 받지 않도록 지정하는 속성입니다.

2.1. both

좌우 양쪽 모두에 플로팅된 요소의 영향을 받지 않습니다.

.example {
  clear: both;
}

2.2. left

왼쪽에 플로팅된 요소의 영향을 받지 않습니다.

.example {
  clear: left;
}

2.3. right

오른쪽에 플로팅된 요소의 영향을 받지 않습니다.

.example {
  clear: right;
}

2.4. none

플로팅된 요소의 영향을 받습니다.

.example {
  clear: none;
}

이러한 오버플로우와 클리어 속성을 활용하여 더 나은 레이아웃과 표시 방식을 제어할 수 있습니다. 각 속성의 값과 활용법을 숙지하여 효율적인 CSS 스타일링을 할 수 있습니다.

CSS Overflow MDN 문서
CSS Clear MDN 문서