Vamos por partes, por más que IE este renderizando el código como vos queres que se vea y FF no, el que esta renderizando mal es IE, FF esta haciendo lo que se supone que debe hacer.
Las propiedades del modelo visual de caja: Width: ancho del
contenido (ni rellenos, ni margenes, ni bordes, ni nada más).
Height: alto del
contenido (ídem).
Padding: relleno (espacio entre el
contenido y el borde).
Border: borde.
Margin: margen (espacio entre esta caja y las otras cajas).
Espacio horizontal de una caja:
El espacio horizontal que necesita una
caja es igual a la suma de su:
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
Espacio vertical de una caja:
El espacio vertical que necesita una
caja es igual a la suma de su:
- margin-top
- border-top
- padding-top
- height
- padding-bottom
- border-bottom
- margin-bottom
Propiedad clear de una caja Float hace que una
caja flote, pero
clear evita que flote al lado de otra.
Cuando se define la propiedad
clear a una
caja lo que se hace es aumentar el
margin-top lo necesario para que la
caja a la que le definimos el
clear no tenga una caja flotante del lado a mantener
limpio (
clear), o sea, un
<div/> (u otro elemento de
caja) con
clear:left; no puede tener cajas flotantes a la izquierda, por eso se aumenta el margen superior para que quede por debajo de las cajas que estén flotando a la izquierda. Si se establece
clear:right; esa
caja no podrá tener cajas flotantes a la derecha y de vuelta se amplia el margen superior. Además se puede establecer a
clear:both; para que la caja no pueda tener ninguna caja flotante al lado o
clear:none; para indicar que la caja puede tener a cualquier lado cajas flotantes (este es el valor por defecto de esta propiedad).
Saludos.