문자열이 넘치는 경우, BFC와 IFC는 어떻게 동작하나?
생각해보니까 왜 변한다고 생각했는지?에 대해 의문점이 생겼어요. normal flow를 따르기 때문에 렌더링을 할 때 부터 x, y, width, height는 정해져있는데 말이죠? 현재 어떠한 자바스크립트, css도 태그들을 리렌더링 시키지 않아요! (변하는게 아니네요!~)
BFC
BFC의 width는 default 값이 부모의 너비다. 위 코드에선 스타일 속성이 있기 때문에 10px을 가진다. fragment는 자식 inline 요소와 상관없기 때문에 빨간 박스의 크기는 자식 요소 크기에 영향을 받지 않는다.
IFC
IFC의 width는 모든 자식 요소들의 height의 합이다. 그렇기 때문에 inline 요소인 span 태그의 fragment는 자식 요소의 크기 만큼 정해진다.