2-2 Line box
line-box 에서 신경쓰는 것은 float 요소밖에 없다.
1. <div class="left" style="width:200px;height:150px">1</div>#
1 영역은 처음 시작했기 때문에 새로운 bfc 영역을 만든다.
float left 는 line box 의 가장 왼쪽에 붙는 것
2. <div class="right" style="width:50px;height:150px">2</div>#
두번째 영역에서는 라인박스의 영역이 줄어든다.
3. <div class="right" style="width:50px;height:100px">3</div>#
linebox 는 가로만 보는 것이 아니라 세로도 본다.
4. <div class="left" style="width:150px;height:50px">4</div>#
5. <div class="right style=width:150px;height:70px">5</div>#
5번영역을 넣을 때에는, 기존의 linebox 의 영역이 충분하지 않아 파기된다.
현재 라인박스의 가장 바닥면을 기준(바운드라인)으로 빈 공간이 라인박스 영역이 된다.
6. <div class="left" style="width:150px;height:50px">6</div>#
7. <div class="left" style="width:150px;height:50px">7</div>#
right 보다 오른쪽에 그려진 그림 없고 left 보다 더 왼쪽에 그려진 그림 없다.
빈공간은 left right 사이만 유효하다.
8-1. <div style="width:150px;height:30px;background:red">ABC</div>#
ABC 박스는 float 가 아니다.
최초 float 가 만들어진 곳을 기준으로 정렬될 것이다.
8-2 ABC1-8#
ABC(N) 은 inline 요소
float 에 가드 되지 않음
overflow:auto 임에도 불구하고, auto 만큼 visible 하게 빨강 박스가 늘어나지 않음
빨강 박스에서 inline 만 벗어나있다.
원래 컨텐츠가 커서 BFC 를 박스를밀어낼 때 visible 속성이면 늘어난다.
line-box 때문에 inline 요소가 밀릴 때는 늘어나지 않는다.
ABC(N) 은 그림은 그렸지만 실체(geometry)가 없다
ABC8 은 왜 저기에 위치해있는지 모르겠음
bound line#
