코드스피츠 css 렌더링 강의 내용 정리
https://youtu.be/ybNH1a14vQY
Float
- bfc, ifc가 아닌 line box로 그려짐
- line box 공식
- float div가 등장하면 bfc가 새로 생김. float bfc는 위에 생김.
- float은 새로운 bfc를 만듦.
- text, inline guard
- float는 inline 요소에 대해 가드로 작동함. 즉, 자신의 영역은 못 건드리게 함. = 따라서 inline 요소는 float 요소를 인식함
- 반면, block 요소에 대해서는 가드하지 않음 = block 요소는 float 요소를 인식하지 않음
- 인라인 요소는 hello는 float에 의해 밀려남. DOM 구조와 상관없이 World도 인라인 요소이므로 밀려남.
- block 요소들은 float를 신경쓰지 않고 모두 자신의 width를 차지함