> For the complete documentation index, see [llms.txt](https://seula00027.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seula00027.gitbook.io/til/css-rendering/02.md). # 코드 스피츠 - CSS Rendering 1회차 2/2 를 보고 정리한 내용 ## Float * New BFC * Float over Normal Flow * Text, Inline guard * Line Box **LINE BOX** 로 나타낸다. 여기서 잠깐 이전시간 복습 Normal Flow가 그려지는 방법: IFC, BFC, Relative ```markup
``` 투명도를 0.5준 `.box2`까지가 BFC로 생성된다. skyblue도 BFC로 그려지지만 .box2 위로 떠있다. 이 현상을 **Normal Flow + Float** 으로 설명할 수 있다. **BFC영역은 어디까지일까** Float 영역 전체 + 인라인 영역 전체하는 공간 끝까지이다. ### Inline Guard ```markup
HELLO
WORLD
``` Inline Guard로 작동되기 때문에 inline요소들은 Box2와 겹치지 않고 옆에 붙는다. (혹은 가로값의 합이 부모값보다 크다면 밑으로.. ) ### Line Box ```markup
4
5
6
7
ABC
``` Line Box는 무조건 Float만 신경쓴다. 가로세로 다 본다.. ### Overflow css2.1 visual formatting model visible | hidden | scroll | inherit | auto * auto - 기본값, 내부의 영역의 크기가 커지면 부모도 커진다. * visible == auto 일치 * scroll 내 geometry영역을 넘어가면 scroll을 만든다. * gemetry hidden 안보이게 짤라줘 ### Overflow-x, y overflow module level3 draft visible | hidden | scroll | clip | auto ### Text-overflow css2.1 UI Module level3 clip | ellipsis ### Overflow - hidden, scroll 은 float와 관련이 있다. ```markup
4
5
6
7
ABC
``` * New BFC - 새로운 BFC를 만든다. * First Line Box Bound overflow auto라도 inline으로 박스가 늘어나지만 line으로는 박스가 늘어나지 않는다. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://seula00027.gitbook.io/til/css-rendering/02.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.