Procentowa wysokość diva nie działa.

<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta charset="utf-8">
<meta name="description" content="Początkowa strona testowa" />
<meta name="keywords" content="slowa,kluczowe" />
</head>

<style>
#box
{
width: 63%;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;

}

#one
{
float:left;
height:50%;
width:33%;
background-color:yellow;
}

#two
{
float:left;
height:50%;
width:33%;
background-color:orange;
}

#three
{
float:left;
height:50%;
width:33%;
background-color:purple;
}

#non
{
clear:both;
}

#four
{
float:left;
height:50%;
width:33%;
background-color:pink;
}

#five
{
float:left;
height:50%;
width:33%;
background-color:red;
}

#six
{
float:left;
height:50%;
width:33%;
background-color:black;
}
</style>

<body>
<div id="box">
     <div id="one">

     </div>

     <div id="two">
     </div>

     <div id="three">
     </div>

     <div id="non">
     </div>

     <div id="four">
     </div>

     <div id="five">
     </div>

     <div id="six">
     </div>
</div>
</body>

</html>

Jeżeli zamienię wysokość box-a na procentową to wszystko znika. Dlaczego?