추가 마크업 없이 최신 CSS에서 부동 소수점을 효율적으로 지울 수 있는 방법은 무엇입니까?

현대 CSS에서 부동 소수점을 지우는 모범 사례

CSS 영역에서 부동 소수점을 지우는 것은 다양한 기술이 등장하는 지속적인 과제였습니다. 수년에 걸쳐.
> 일반적인 접근 방식이었기 때문에 불필요한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!