영리한 Clearfix로 CSS 플로팅 문제 해결

CSS 플로팅 문제를 해결하기 위해 클리어를 사용하는 방법은 많은 프런트엔드 개발자가 우려하는 문제입니다. 클리어인가요 아니면 클리어픽스인가요? 사실 우리의 궁극적인 목표는 플로팅을 프런트로서 더 많이 만드는 것입니다. -최종 직원, 우리는 심층적인 연구와 토론을 해야 합니다...

범용 플로트 폐쇄, 많은 친구들이 다음과 같은 일반적인 솔루션을 사용하고 있다는 것을 알게 되었습니다:

clear{clear:both; height:0;overflow:hidden;}

이 방법은 float를 지워야 하는 곳에 div.clear 또는 br.clear를 추가하는 것입니다. 이것이 기본적인 float 지우기 문제를 해결할 수 있다는 것을 알고 있습니다. 하지만 이 방법의 가장 큰 결점은 단지 div만 추가하더라도 html 구조가 변경된다는 점입니다.

최적의 플로팅 클로저 솔루션(우리가 권장하는 솔루션):

clearfix:after{content:".";display:block;height:0;clear :both;visibility:hidden}

clearfix{*+height:1%;}

사용법은 매우 간단합니다. 플로팅 요소 클라우드 요소에 class="clearfix"를 추가합니다. 이 방법에도 단점이 있다는 것을 알 수 있지만 실제로는 작은 문제입니다. CSS 작성 방법을 변경해도 괜찮습니다:

clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

clearfix{*+height:1%;}

위 작성 방법은 html 구조 변경을 피하고 CSS로 직접 해결한 것입니다.
아주 인상적인 플로팅 클로저 방법:

clearfix{overflow:auto;_height:1%}

이 방법은 제가 해외에서 읽은 기사에서 얻은 해결책입니다. 이 기사에서는 테스트를 거쳐 만족스러운 것으로 입증되었습니다. 정말 간단하고 강력합니다. 좋아하는 학생들도 이 방법을 시도해 볼 수 있습니다.

이 방법은 Duanyou radom에서 제공했으며 테스트를 통과했습니다.

clearfix{overflow:hidden;_zoom:1;}