내부에 float 를 쓰려면
외곽에도 float 를 써주거나,  display:inline-block 을 하든지.. 
별도의 조치를 해줘야합니다

http://naradesign.net/wp/2008/05/27/144/    글을 참조해보세요

float 속성은 말그대로 레이어를 띄워버리는 속성입니다.

그래서 자식 div 인 '연습'이 부모창 위로 띄워져 버렸기 때문에 자식 div 를 감싸고 있던 부모 div 의 높이가 사라져

배경이 없어진것처럼 보이는 것입니다. ^^;

바깥에 있는 div에서 float를 clear시켜야합니다.

<style>
.outer { background-color:#ccc; }
.outer:after { content: " ";  display: table;   clear: both }
.inner {float:left;}
</style>

<div class="outer">
    <div class="inner">연습</div>
</div>