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

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

---

CSS2.1 사양 은 새로운 "블록 형식화 컨텍스트"를 설정하는 것 외에 다른 것을 요구합니다overflowvisible . 이것은 레이아웃에 영향을주지 않고 오버플로를 숨기는 것이 명백한 목적인 속성이 실제로 레이아웃에 큰 영향을 미친다는 사실을 이상하게 생각합니다.

visible완전히 관련되지 않은 두 가지 기능을 결합하는 것 외에 다른 오버플로 값인 BFC 생성 여부와 오버플로 숨김 여부입니다. "overflow : hidden"은 BFC 없이는 완전히 무의미한 것이 아닙니다. 플로트는 역사적으로 부모 요소를 오버플로 할 수 있기 때문에 레이아웃을 변경하지 않고 오버플로를 숨기는 것이 합당 해 보입니다.

이 결정이 알려진 이유는 무엇입니까? 사양 작업을 한 사람들이 왜 이것이 사실로 결정되었는지 설명했습니까?

---

귀하를 대신하여 메일 링리스트에서 이에 대해 물었습니다. 스레드는 여기 에서 찾을 수 있습니다 . 요약 하면 대부분의 경우 스크롤링 콘텐츠와 관련이 있습니다 .

기본적으로 사양이 이것을 말하지 않았다면, 스크롤 가능한 요소와 플로트가 교차하면 브라우저가 스크롤 할 때마다 스크롤 가능한 요소의 내용을 다시 래핑 (침입하는 플로트 주변)해야하기 때문입니다. 이것은 기술적으로 CSS 2.0에 필요한 것이지만 구현되지 않았으며 스크롤 속도에 큰 문제가되었을 것입니다.

-데이비드

대부분의 경우 플로트의 부모 외부에서 발생할 수 있지만 플로트와 교차하는 상자의 스크롤 가능한 콘텐츠를 나타냅니다. 나는 이것이 이미 자연스럽게 발생하기 때문에 스크롤 가능한 컨테이너 내에서 float 주위의 콘텐츠를 다시 래핑하는 것과 관련이 없다고 생각 합니다. 플로트는 컨테이너에 클립되고 어쨌든 나머지 콘텐츠와 함께 스크롤됩니다 .

마침내 이것은 나에게 의미가 있습니다. 사실, 여기에 예제를 제공 할 것이므로 여러분과 궁금해하는 다른 사람들에게 이해가 되길 바랍니다. 동일한 고정 높이 overflow: visible(기본값)를 가진 두 개의 상자가 포함 된 시나리오를 생각해보십시오. 첫 번째 상자에는 부모의 높이 이상으로 늘어나는 부동 소수점이 포함되어 있습니다.

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

/* Presentational properties omitted */
div {
    height: 80px;
}

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

섹션 9.5에 제공된 예제 중 하나와 유사합니다 . 여기 두 번째 상자는이 답변의 목적을 위해 내용이 넘쳐나는 것으로 표시됩니다.

콘텐츠가 스크롤되지 않기 때문에 괜찮습니다.하지만가 overflow아닌 다른 것으로 설정 visible되면 콘텐츠가 상자의 경계에 의해 잘릴뿐만 아니라 스크롤 가능해집니다. 두 번째 상자 overflow: auto에이있는 경우 브라우저가 원래 CSS2 사양을 구현 한 경우 다음과 같이 표시됩니다.

플로트 때문에 콘텐츠를 스크롤하려고하면 브라우저가 플로트에 의해 가려지지 않도록 다시 래핑해야합니다 (그리고 상단 가장자리에서 스크롤되는 부분은 어떻게됩니까?). 아래로 스크롤하면 다음과 같이 보일 것입니다.

여기서 문제는 브라우저가 스크롤하는 동안 콘텐츠를 다시 칠할 때 마다 다시 래핑해야한다는 것 입니다. 픽셀 기반의 부드러운 스크롤이 가능한 브라우저의 경우 (즉, 모두) 성능에 문제가되는 이유를 알 수 있습니다. (사용자 경험도 마찬가지입니다.)

하지만 사용자가 콘텐츠를 스크롤 할 수있는 경우입니다. 그렇죠? 이것은 overflow: auto및 에게 의미가 overflow: scroll있지만 overflow: hidden어떨까요?

글쎄, 일반적인 오해는 컨테이너가 overflow: hidden단순히 내용을 클리핑하여 숨기고 스크롤 할 수 없다는 것입니다. 이것은 완전히 사실이 아닙니다 .

스크롤링 UI가 제공되지 않지만 콘텐츠는 프로그래밍 방식으로 스크롤 할 수 있으며 여러 페이지에서 이러한 스크롤링 만 수행합니다 (예 : scrollTop관련 요소 설정 ).

-Boris

Indeed, this is what it'd look like if the second box was set to overflow: hidden and then scrolled to the bottom with the following JavaScript:

var div = document.getElementsByTagName('div')[1];
div.scrollTop = div.scrollHeight;

Again, notice that the content would have to be rewrapped to avoid being obscured by the float.

Even though this wouldn't be as painful for performance as had scrolling UI been available, my best guess is that they made boxes with any overflow value other than visible generate a new BFC mainly for the sake of consistency.

---

And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. This particular behavior is specified in the following paragraph:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

Here's what it looks like with overflow: auto for example:

Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.

If you apply overflow: auto to the first box instead, the float is clipped into its containing box with the rest of the content due to its fixed height, which is set to 80px in the example code given above:

If you revert the first box to height: auto (the default value), either by overriding or removing the height: 80px declaration from above, it then stretches to the height of the float:

This happens to be new in CSS2.1 as well, in that an element with height: auto that generates a new block formatting context (i.e. a block formatting context root) will stretch vertically to the height of its floats, and not just enough to contain its in-flow content unlike a regular box. The changes are documented here and here. The change leading to the side-effect of shrinking the box so that it does not intersect the float is documented here.

In both of these cases, no matter what you do to the second box, it will never be affected by the float because it has been restricted by the bounds of its container.

---

I know this will be a speculative answer, however after reading the specifications a few times here is my view on this:

What section 9.4.1 is talking about is any block element that does not fully contain or does not fill the containment space. For example when you float an element it is no longer filling 100% of the parent, like in-flow elements do. Inline blocks, table cells, and table captions are also elements that you can affect height and width but that are not intrinsically 100% of the parent (yes table>tr>td is one that would fill 100% of it's parent but it is designed to allow for multiple td's so the td doesn't count as it will automatically shrink to accommodate additional td's) this also applies to any overflow other than visible because it breaks the containment of the block element.

So if I am reading this correctly the way it works is the 9.4.1 section is referring to block elements that break the default containment rules of the block elements as specified by section 9.2.1

참고URL : https://stackoverflow.com/questions/9943503/why-does-css2-1-define-overflow-values-other-than-visible-to-establish-a-new-b