CSS - div, float 연습

<div style="background: #ededed">

hello

<div style="background: #444">

world

</div>

<div style="float:left; background: #666">

1

</div>

<div style="background: #888; width: 100px;">

2

</div>

<div style="background: #aaa">

3

</div>

</div>

hello

world

1

2

3

첫번째 div에서 BFC(block format context)이 생성 되어집니다. block은 자동으로 height값이 자기 부모 영역만큼 커집니다. ( hello )

float: left 옵션을 주면 block 영역이 현재 div 내에 있는 텍스트만큼만 영역이 잡힙니다.

https://jsfiddle.net/bugtype/4ockhzp1/5/