Hola, no te hace falta usar los <br />, si tu lo que quieres hacer son dos bloques flotando al lado el uno del otro y despues ademas quieres hacer que el siguiente elemento se posicione debajo. lo unico que tienes que hacer es:
Suponemos que BlockA y BlockB son los que tienen float: left; por que son los que quieres que esten al lado... BlockC el que quieres que se pasé abajo... Pues es a BlockC al que le tienes que poner clear: Both; para que ignore tanto el float left como el right que le hayas indicado a los distintos elementos dentro del contenedor.
Este ejemplo funciona, puedes copiarlo y guardarlo en un .html y verlo.
Espero te ayude ;)
Código HTML:
<style>
#contenedor {
background-color: #666;
color: #fff;
width: 240px;
height: 240px;
border: 3px solid #333;
}
#blockA {
background-color: #000;
color: #fff;
width: 100px;
height: 100px;
border: 10px solid #0f0;
float: left;
}
#blockB {
background-color: #000;
color: #fff;
width: 100px;
height: 100px;
border: 10px solid #f00;
float: left;
}
#blockC {
background-color: #000;
color: #fff;
width: 220px;
height: 100px;
border: 10px solid #00f;
clear: both;
}
</style>
<div id="contenedor">
<div id="blockA">Bloque 1</div>
<div id="blockB">Bloque 2</div>
<div id="blockC">Bloque 3</div>
</div>