>웹 프론트엔드 >CSS 튜토리얼 >`overflow: auto`는 어떻게 마술처럼 부동 소수점을 제거하고 높이 문제를 해결합니까?

`overflow: auto`는 어떻게 마술처럼 부동 소수점을 제거하고 높이 문제를 해결합니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-27 19:21:11479검색

How does `overflow: auto` magically clear floats and resolve height issues?

Overflow: Auto Magic: 부동 소수점 지우기 및 높이 문제 해결

귀하의 딜레마는 부동 요소의 기본 동작에서 비롯됩니다. 포함된 요소의 높이가 동작하도록 하는 표준 레이아웃 흐름

왜 오버플로: Auto Stretches Wrappers

오버플로: auto는 부동 소수점을 직접 지우지 않습니다. 대신 래퍼 요소에 대한 새로운 블록 형식화 컨텍스트(BFC)를 설정합니다. 이 BFC는 다음과 같은 효과가 있습니다.

  • 떠다니는 어린이가 래퍼에서 탈출하는 것을 방지합니다.
  • 래퍼가 플로트를 담을 수 있는 높이를 설정하도록 합니다.

이 격납 장치를 사용하면 래퍼가 떠 있는 기둥 주위로 확장되고 맞춰져 높이를 해결할 수 있습니다. issue.

왜 클리어 플로트가 필요한가요?

플로팅 요소는 상위 요소 내의 일반 흐름에서만 제외됩니다. 부동 소수점 아래의 콘텐츠를 자체 줄로 이동하려면 "클리어" 요소라는 추가 요소가 필요합니다. 이 요소는 부동 소수점 뒤에 남은 공간을 지우고 새 줄을 시작하는 명시적인 목적을 가지고 있습니다.

귀하의 예에서 Overflow: auto는 부동 소수점을 효과적으로 포함하는 BFC를 설정합니다. 그러나 부동 소수점 뒤에 다른 요소가 있는 경우 명시적인 명확한 요소 없이는 올바르게 흐르지 않을 수 있습니다.

위 내용은 `overflow: auto`는 어떻게 마술처럼 부동 소수점을 제거하고 높이 문제를 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.