방법 - 플로트 지우기(Clearfix)
"clearfix" 핵으로 플로트를 지우는 방법을 배우십시오.
플로트를 지우는 방법(Clearfix)
부동 요소 뒤의 요소는 주위를 흐릅니다. "clearfix" 핵을 사용하여 문제를 해결하십시오.
Clearfix 없이
클리어픽스와 함께
클리어픽스 해킹
요소가 포함된 요소보다 키가 크고 부동 상태이면 컨테이너 외부에서 오버플로됩니다.
그런 다음 overflow: auto;
이 문제를 해결하기 위해 포함하는 요소에 추가할 수 있습니다.
예시
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.