CSS2.1이 블록 형식 지정 컨텍스트를 생성하기 위해 'visible' 이외의 'overflow'를 사용하는 이유는 무엇입니까?

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

CSS2.1에서, 새로운 "블록 형식화 컨텍스트"를 생성하기 위해 "visible" 이외의 오버플로 값이 지정됩니다. 이 결정은 겉보기에는 관련 없어 보이는 두 가지 기능, 즉 BFC(블록 서식 컨텍스트) 생성과 오버플로 억제를 결합한 근거에 대한 의문을 제기했습니다.

역사적 맥락 및 주요 고려 사항

CSS 메일링 리스트에 대한 문의에 따르면 이러한 결정은 부동 소수점과 교차하는 상자 내 스크롤 문제를 해결해야 할 필요성에서 비롯되었습니다. 원래 CSS 2.0 사양에서는 브라우저가 스크롤하는 동안 침입하는 부동 소수점 주위에 콘텐츠를 다시 래핑해야 하므로 성능 문제가 발생합니다.

CSS2.1 수정안에서는 "visible" 이외의 오버플로 값에 대해 새로운 BFC를 설정하여 이러한 다시 래핑을 방지합니다. 이렇게 하면 다음이 보장됩니다.

• 새 BFC 내의 콘텐츠는 부동 소수점의 영향을 받지 않습니다.
• BFC의 스크롤 동작은 부동 소수점의 존재로 인해 영향을 받지 않습니다.

예

고려 다음 예:

<div>...</div>
<div>
  ...:
  ...:
</div>

div {
  height: 80px;
}

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

CSS 2.0에서 Overflow: visible(기본값)을 사용하면 두 번째 상자가 부동 요소와 겹칩니다. 그러나 Overflow: auto(CSS 2.1)를 사용하면 두 번째 상자에 새 BFC가 추가되어 float가 콘텐츠와 교차하는 것을 방지합니다.

Overflow: Hidden의 의미

Overflow: Hidden은 일반적으로 넘쳐나는 콘텐츠를 숨기지만 여전히 프로그래밍 방식 스크롤을 허용합니다. 교차하는 부동 소수점을 포함하는 Overflow: Hidden이 있는 상자는 스크롤 중에 다시 래핑되는 것을 방지하기 위해 새로운 BFC도 설정해야 하기 때문에 이는 중요합니다.

CSS2.1에 도입된 변경 사항

CSS2 .1에는 추가 변경 사항이 도입되었습니다.

• 블록 서식 컨텍스트 루트 요소( "visible" 이외의 오버플로 값)은 이제 해당 플로트 높이까지 수직으로 늘어납니다.
• overflow: Hidden 및 height: auto가 있는 상자는 컨테이너 경계에 의해 제한되며 더 이상 플로트와 교차할 수 없습니다.

일관성과 성능

결국, 만들기로 한 결정 "표시" 이외의 오버플로 값에 대한 새로운 BFC는 주로 성능 고려 사항과 오버플로된 콘텐츠 처리의 일관성에 대한 요구에 의해 주도되었습니다. 이 접근 방식은 스크롤 성능을 최적화하고 예측 가능한 레이아웃을 유지합니다.

위 내용은 CSS2.1이 블록 형식 지정 컨텍스트를 생성하기 위해 'visible' 이외의 'overflow'를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!