CSS2.1의 보이지 않는 오버플로는 어떻게 블록 서식 컨텍스트를 생성하고 레이아웃에 영향을 줍니까?

CSS2.1의 오버플로 동작: 새로운 블록 형식 지정 컨텍스트 설정

CSS2.1에서 사양은 다음 이외의 오버플로 값을 요구합니다. "visible"은 새로운 블록 형식화 컨텍스트(BFC)를 설정합니다. 이 결정은 겉보기에는 관련이 없어 보이는 두 가지 기능인 BFC 생성과 오버플로 은폐를 병합한 이유에 대한 의문을 제기했습니다.

눈에 보이지 않는 오버플로가 있는 BFC 설정의 이론적 근거

기본 이 동작의 이유는 특정 시나리오에서 원활한 스크롤을 보장해야 하기 때문입니다. 콘텐츠가 넘쳐나는 컨테이너가 스크롤 가능한 경우, 플로트가 해당 콘텐츠와 교차하도록 허용하려면 사용자가 스크롤할 때 브라우저가 플로트 주변의 콘텐츠를 지속적으로 다시 래핑해야 합니다. 이 다시 래핑 프로세스는 스크롤 성능에 큰 영향을 미칩니다.

눈에 보이지 않는 오버플로가 레이아웃에 미치는 영향

눈에 보이지 않는 오버플로가 있는 요소가 BFC를 설정하면 전체 요소 동일한 블록 형식화 컨텍스트에서 부동 요소를 위한 자리를 마련하기 위해 옆으로 밀려납니다. 이 동작은 요소의 테두리 상자가 부동 소수점의 여백 상자와 겹치는 것을 방지하여 적절한 레이아웃을 보장합니다.

높이가 있는 요소 늘이기: 자동 및 보이지 않는 오버플로

CSS2.1에서는 height: auto가 있는 요소와 보이지 않는 오버플로가 해당 플로트의 높이와 일치하도록 수직으로 늘어나는 추가 변경 사항이 도입되었습니다. 이러한 변경을 통해 해당 요소는 클리핑 없이 플로팅 콘텐츠를 완전히 포함할 수 있습니다.

오버플로 동작에 대한 예외

보이지 않는 오버플로가 있는 새 BFC를 설정하는 일반 규칙에도 불구하고 , 예외가 있습니다:

• 요소의 높이가 고정된 경우 플로트가 컨테이너에 잘립니다. 요소는 늘어나지 않습니다.
• 요소에 clear: left 또는clear: 둘 다 적용되면 눈에 보이지 않는 오버플로가 있는지 여부에 관계없이 수직으로 푸시됩니다.

결론

CSS2.1에서 보이지 않는 오버플로 값을 사용하여 새로운 블록 형식 지정 컨텍스트를 설정하기로 한 결정은 주로 스크롤 성능을 향상하고 플로트가 있는 경우 일관된 레이아웃을 보장해야 하는 필요성에 따라 만들어졌습니다. 이 동작은 height: auto 및 non-visible 오버플로가 있는 요소에 대한 추가 변경과 함께 더욱 강력하고 예측 가능한 레이아웃 모델을 제공합니다.

위 내용은 CSS2.1의 보이지 않는 오버플로는 어떻게 블록 서식 컨텍스트를 생성하고 레이아웃에 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!