Estimado, esto ocurre porque no tienes nada que le indique que eso ya no debe flotar...
Para esto, debes usar el atributo "clear", éste atributo le indica al HTML y CSS que parte del código debe saltar (ya sea: left, right o Both [ambos]).
Si no lo deseas a un costado, debes poner un div con style "clear:both". Por Ejemplo
Cita:
<nav>
<ul id="menu">
<li class="button"><a href="#home">Principal</a></li>
<li class="button"><a href="#news">Noticias</a></li>
<li class="button"><a href="#about">Sobre Nosotros</a></li>
<li class="button"><a href="#services">Servicios</a></li>
<li class="button"><a href="#contact">Contacto</a></li>
<li class="button"><a href="#contact">Blog</a></li>
</ul>
<div style="clear:both;"></div>
<div id="search">
<p>Busqueda</p>
</div>
</nav>
Haciendo esto, al HTML/CSS le indicas "acá se acaba el Float", recuerda que los float son Campos FLOTANDO, indiferente del resto de info que posean, SIEMPRE ESTARÁN FLOTANDO HACIA DONDE LE INDIQUES, si es que no le pones un "clear:both".
Saludos! y espero que hayas comprendido de mejor forma.