왜 오버플로를 '표시' 이외의 것으로 설정하면 CSS2.1에서 새로운 블록 형식 지정 컨텍스트가 생성됩니까?

CSS2.1이 새로운 블록 형식 지정 컨텍스트를 설정하기 위해 "Visible" 이외의 오버플로 값을 정의하는 이유는 무엇입니까?

CSS2.1에서 "visible"을 제외한 오버플로 값 "는 새로운 BFC(블록 형식 지정 컨텍스트)를 설정하기 위해 지정됩니다. 오버플로의 의도된 목적은 레이아웃에 영향을 주지 않고 오버플로를 숨기는 것이기 때문에 혼란스러울 수 있습니다.

문제를 더 자세히 살펴보면 "visible"을 제외한 오버플로 값이 겉보기에는 관련 없는 두 가지 기능, 즉 BFC 생성 및 오버플로로 구성된다는 것이 분명해집니다. 숨김. 그러나 역사적으로 입증된 것처럼 float는 상위 요소 이상으로 확장될 수 있으므로 레이아웃을 변경하지 않고도 오버플로를 숨기는 것이 합리적입니다.

결정 이유

이에 대한 근거 결정은 주로 콘텐츠 스크롤에서 비롯됩니다. CSS 작업 그룹 메일링 목록에 따르면:

"사양에서 이를 지정하지 않은 경우 스크롤 가능한 콘텐츠와 교차하는 부동 소수점은 브라우저가 스크롤하는 동안 스크롤 가능한 콘텐츠(침입 부동 소수점 주변)를 계속해서 다시 래핑해야 합니다. 이렇게 되면 계산 비용이 많이 들고 스크롤 성능에 해롭습니다."

방법 작동함

다음 시나리오를 고려하십시오. 오버플로가 "표시"로 설정된 두 개의 고정 높이 상자. 여기서 첫 번째 상자에는 상위 높이를 넘어 확장되는 부동 소수점이 포함되어 있습니다.

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

오버플로가 "표시"로 유지되면 콘텐츠가 스크롤되지 않으므로 문제가 없습니다. 그러나 오버플로가 "visible" 이외의 값으로 설정되면 콘텐츠가 상자 경계에 의해 잘리고 스크롤 가능해집니다. 두 번째 상자에 Overflow: auto가 있는 경우 다음과 유사합니다.

[overflow가 있는 두 개의 고정 높이 상자 이미지: auto]

float가 스크롤을 방해하므로 브라우저는 콘텐츠가 계속 표시되도록 합니다. 스크롤하는 동안 콘텐츠가 다시 그려질 때마다 이 프로세스를 반복하면 성능에 부정적인 영향을 미칠 수 있습니다.

일관성과 숨겨진 스크롤

또 다른 명백한 오해는 Overflow: Hidden이 있는 컨테이너가 단순히 콘텐츠를 숨긴다는 것입니다. 스크롤할 수 없습니다. 스크롤을 위한 사용자 인터페이스는 없지만, scrollTop 속성을 조정하여 프로그래밍 방식으로 콘텐츠를 스크롤하는 것은 여전히 ​​가능합니다. 이 경우에도 부동 소수점 모호함을 피하기 위해 콘텐츠를 다시 래핑해야 합니다.

따라서 "visible"을 제외한 모든 오버플로 값은 일관성을 위해 BFC가 됩니다.

CSS2.1의 변경 사항

CSS2.1에서는 다음 이외의 오버플로 값에 대해 BFC를 포함합니다. "visible"로 인해 요소가 부동 소수점과 상호 작용하는 방식이 변경되었습니다.

• 오버플로가 있는 전체 상자는 콘텐츠를 캡슐화하는 BFC를 생성하므로 플로트에서 옆으로 밀려납니다.
• height: auto 및 BFC가 있는 상자는 플로트를 수용하기 위해 세로로 늘어납니다. 그냥 유입량에 맞춰서 content.

요약

BFC 생성을 "visible" 이외의 오버플로 값에 연결하기로 한 결정은 주로 성능을 고려하고 프로그래밍 방식과의 일관성을 보장하기 위해 결정되었습니다. 스크롤. 모순되는 것처럼 보이는 동작에도 불구하고 플로트와 관련된 복잡한 시나리오에서 레이아웃 및 스크롤의 무결성을 유지하는 역할을 합니다.

위 내용은 왜 오버플로를 '표시' 이외의 것으로 설정하면 CSS2.1에서 새로운 블록 형식 지정 컨텍스트가 생성됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!