Eliminar floats "internos" respetando los "externos"

[moNTeZIon]

Disculpad por el título. Ha sido una forma de definir el problema.
Imaginemos 3 DIVs: IZQUIERDA - CENTRO - DERECHA

Código CSS:

IZQUIERDA {float: left; width 200px; }
DERECHA {float: right; width 200px; }
CENTRO {margin: 0px 210px; }
 

Entonces, si quiero un pie de página que ocupe todo lo ancho, y comience al final de la página, tengo que poner un DIV adicional, con clear: both

Código HTML:

<div>
  <div id="IZQUIERDA"></div>
  <div id="DERECHA"></div>
  <div id="CENTRO"></div>
  <div style="clear: both;"></div>
</div>
<div id="PIE"></div>
 

De esta forma consigo el diseño de las tres columnas y un pie.
Hasta aquí la introducción. Ahora viene el problema.
En la capa CENTRO, donde se ubicará el contenido principal de la página, quiero poner un par de DIVs flotantes para mostrar dos imágenes, y luego seguir con el contenido.
Para ello empleo el mismo "truco": Primeor los dos DIVs flotantes, luego el DIV con clear: both; y finalmente sigo con el contenido.
Al realizar esto, el diseño de la página se rompe por algún motivo.
Pienso que es porqué al añadir este último DIV con clear: both; lo que hace es romper TODOS los floats, y no sólo los de la capa CENTRO.
No se si me explico. Espero que si.
¿Pueden darme alguna sugerencia para solucionar este problema?
Gracias y un saludo.

[ArturoGallegos]

en lugar del div adicional con clear:both coloca overflow:hidden; al div padre

Código HTML:

<div style="overflow:hidden;">
      <div id="IZQUIERDA"></div>
      <div id="DERECHA"></div>
      <div id="CENTRO"></div>
    </div>
    <div id="PIE"></div>
 

claro esto te funcionara siempre y cuando el div padre no tenga una altura definida

[moNTeZIon]

Gracias por responder.
Pues la verdad es que no, por suerte, no tiene ninguna altura definida, sino que ésta debería variar en función del contenido de cada página.
Entonces, leyendo tu solución, ¿Debo entender que el "overfloat: hidden" hay que emplearlo en todas aquellas capas que contengan en su interior elementos flotantes?
Por ejemplo, volviendo al caso que he comentado al principio, entiendo que deberían llevar overflow: hidden , tanto la capa que has mencionado, como la capa CENTRO, que a su vez
también tiene en su interior otros DIVs flotantes...
¿Te entendí bien?
Gracias.

[ArturoGallegos]

así es amigo, la mejor forma que conozco al momento para solventar el problema es colocar overflow:hidden o auto a cada elemento padre que contenga contenido flotante, claro que hay que valorar si es necesario o no, algunas veces con el clear:both en el siguiente elemento se puede solventar, eso si nunca agregar un div o img vació para el clear both.

[moNTeZIon]

Gracias Ag666!
El truco que mencionas funcionó perfectamente.
Un saludo.