https://www.youtube.com/watch?v=dNQZqNd_uUE
지난번 영상과 큰 차이가 없는 것 같네요
다만, overflow: hidden 에 대해 이야기를 하고 있습니다.
버그라고 이야기를 하고 있는데, 버그 아니라 표준입니다;;
(물론 웹 표준이 구현에 구겨 맞춰 만들어진 감이 있긴 합니다.)
https://www.w3.org/TR/CSS2/visuren.html#block-formatting
Visual formatting model
In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by: The visual formatting model does not specify all aspects of formatting (e.g., it does not s
www.w3.org
CSS 2.1 표준을 보면,
"Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents."
overflow가 visible이 아닌, block은 새로운 block formatting context를 만듭니다..
그럼 container 의 height는 지정하지 않으면(auto) 어떻게 계산될까요?
https://www.w3.org/TR/CSS21/visudet.html#root-height
Visual formatting model details
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows: In paged media, an absolutely positioned element i
www.w3.org
"In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:
If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not."
height가 auto일 때 block의 크기는 topmost 블럭이랑 bottommost 블럭이 결정합니다. 다만 float이 있으면 그만큼 늘어납니다.
따라서, overflow로 인해 새 block formating context가 시작되었고, 그 block formating context의 크기가 float을 포함했기 때문에 해당 block formating context의 크기가 float크기만큼 커져서 결정된 것입니다.
만약 overflow를 준 container block (영상에서 main) 에 height를 임의로 지정한다면, 다음 block은 float을 무시하지 않기 때문에 겹쳐 보이게 될 것입니다.
반면, clear는 현재의 block formating context이전의 float box와 연관되지 않게 하는 프로퍼티입니다.
따라서 main의 height를 지정하더라도 겹쳐 보이지 않게 됩니다.
'프로그래밍 언어 > HTML / JavaScript' 카테고리의 다른 글
| FE공부1 - 웹스토리보이님의 레이아웃01 영상 (0) | 2022.12.15 |
|---|---|
| Syntax highlighter 를 Tistory에 적용하기 (0) | 2013.02.28 |
| [개인용] Test page들. (0) | 2012.03.13 |
| doctype and margin (0) | 2012.02.27 |
| html에서 html tag를 쓸 수 있는가? (I don't like <foo> in <pre>. (0) | 2012.02.21 |