CSS - 문제 미리보기
문제 1262
hard
다음 상황에서 나타날 수 있는 문제와 해결 방법으로 올바른 것은?
```css
.container {
border: 2px solid black;
}
.floated-item {
float: left;
width: 200px;
height: 150px;
background: lightblue;
}
```
```html
```
Float Item
정답: B
float로 인한 부모 높이 손실 문제:
문제 발생 원인:
• float된 요소는 일반 문서 흐름에서 제거됨
• 부모 컨테이너가 float된 자식의 높이를 인식하지 못함
• 결과적으로 부모의 높이가 0이 되거나 매우 작아짐
해결 방법들:
1. Clear 방법:
```css
.container::after {
content: "";
display: table;
clear: both;
}
```
2. Overflow 방법:
```css
.container {
overflow: auto; /* 또는 hidden */
}
```
3. Flexbox 현대적 해결책:
```css
.container {
display: flex;
}
.floated-item {
/* float 제거 */
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.