浮动 제거 방법（Clearfix）
clearfix 기술을 사용하는 방법을 배웁니다.
浮动 제거 방법 (Clearfix)
浮动 요소 뒤의 요소는 그 주위로 흐릅니다.clearfix 해결책을 사용하여 문제를 해결합니다:
Clearfix 사용하지 않음
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Clearfix 사용
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
clearfix 기술
만약 어떤 요소가 포함하는 요소보다 높고, float를 사용하고 있다면, 그것은 컨테이너를 벗어날 것입니다.
그런 다음, 이 문제를 해결하기 위해 포함된 요소에 overflow: auto; 추가할 수 있습니다:
예제
.clearfix {
overflow: auto;
}
외부 마argins과 내부 margins를 제어할 수만 있다면,overflow:auto 浮动을 제거하는 효과가 좋습니다 (아니면, 스크롤바를 볼 수 있을 수 있습니다).
그러나 새로운, 현대적인 clearfix 기술은 사용하기 더 안전하며 대부분의 웹 페이지는 다음 코드를 사용합니다:
예제
.clearfix::after {
content: "";
clear: both;
display: table;
}
관련 페이지
강의:CSS 부浮
