Opinión sobre uso de clear

[joseoliveras]

Hola.

Al grano, tengo esta estructura que se repite varias veces:

Código HTML:

<h1>titulo</h1>
<img src="laimagen.png" />
<p>parrafo</p>
 

La imagen va flotada

Código CSS:

img{
float:left;
}
 

El problema es que cuando la imagen es más alta que el párrafo debo limpiar el <h1> pero entonces, como ya sabéis no se respetan los márgenes superiores del <h1>.

Propongo esta solución con pseudoelementos, pero seguro que hay una manera más fácil de hacerlo, sin tocar el html.

Código CSS:

h1:before{
content:"";
display:block;
height:30px; /* la distancia con respecto a la imagen */
clear:both;
}
 

Gracias