추가 마크업 없이 최신 CSS에서 부동 소수점을 효율적으로 지울 수 있는 방법은 무엇입니까?
Dec 02, 2024 pm 05:32 PM현대 CSS에서 부동 소수점을 지우는 모범 사례
CSS 영역에서 부동 소수점을 지우는 것은 다양한 기술이 등장하는 지속적인 과제였습니다. 수년에 걸쳐. <br>> 일반적인 접근 방식이었기 때문에 불필요한 HTML 마크업이 도입되었습니다. 최신 CSS는 이 문제에 대해 더욱 우아하고 효율적인 솔루션을 제공합니다.
의사 요소 접근 방식:
2014년에 선호되는 기술은 의사 요소를 활용하여 클리어픽스. 여기에는 부동 요소의 상위 컨테이너에 다음 스타일을 추가하는 작업이 포함됩니다.
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; }
이 방법은 모든 최신 브라우저에 효과적이며 추가 HTML 요소가 필요하지 않습니다.
오버플로 속성:
또 다른 브라우저 간 솔루션은 상위 컨테이너의 오버플로 속성을 숨김 또는 자동으로 설정하는 것입니다. 이는 추가 마크업 없이 컨테이너 내의 부동 소수점을 지우는 효과가 있습니다.
.container { overflow: hidden; }
Micro Clearfix:
더욱 최소한의 접근 방식을 위해 Nicholas Gallagher는 마이크로 클리어픽스 기술을 제안했습니다:
.cf { zoom: 1; } .cf:before, .cf:after { display: table; } .cf:after { clear: both; }
이 기술은 오버플로 속성과 의사 요소를 결합하여 다음을 달성합니다. 앞서 언급한 Clearfix 기술과 동일한 결과입니다.
JavaScript 해킹 방지:
이러한 목적으로 JavaScript 해킹을 사용하지 않는 것이 좋습니다. JavaScript는 다양한 브라우저에서 다양한 수준으로 지원될 수 있으며 필요할 때 항상 사용 가능하거나 활성화되지 않을 수도 있습니다. 따라서 브라우저 간 호환성을 위해서는 CSS 기반 솔루션을 사용하는 것이 더 안정적입니다.
위 내용은 추가 마크업 없이 최신 CSS에서 부동 소수점을 효율적으로 지울 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교
