CSS - 문제 미리보기

문제 1266

medium
clearfix가 필요한 상황과 해결하는 문제로 올바른 것은?
```css
.container {
border: 2px solid black;
}
.floated-child {
float: left;
height: 200px;
}
```
A. 자식 요소가 보이지 않는 문제 해결
B. 부모 컨테이너의 높이가 0이 되는 문제 해결
C. 텍스트가 겹치는 문제 해결
D. 색상이 표시되지 않는 문제 해결

정답: B

clearfix가 해결하는 핵심 문제:

문제 발생 원인:

• float된 자식 요소가 일반 문서 흐름에서 분리
• 부모가 float된 자식의 높이를 인식하지 못함
• 결과: 부모 높이가 0이 되거나 매우 작아짐

clearfix 해결 방법들:

1. Modern Clearfix (권장):
```css
.container::after {
content: "";
clear: both;
display: table;
}
```
2. Overflow Method:
```css
.container {
overflow: auto;
}
```
🎯 이 과목 문제 풀기 🏠 홈으로 가기

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.