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

[jorgeabreo]

Hola,

Yo creería que si la estructura se repite varias veces, deberías meter eso en un pequeño contenedor, que en este caso podría ser un <li>

HTML

Código HTML:

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

CSS

Código CSS:

ul li {
clear: both;
}
 

Así con CSS limpias cada <li>...

Bueno es una de las posibles soluciones,

Espero te sirva de algo,

Saludos!

[sergio1210]

El problema es que cuando la imagen es más alta que el párrafo debo limpiar el <h1>

No entiendo eso. ¿donde esta el problema en el h1 cuando la imagen es más alta que el parrafo?
En teoría si la imagen es más alta que el parrafo pues debajo del parrafo quedara un trozo en blanco nada mas, pero al h1 le da igual.

[joseoliveras]

Gracias a los dos por contestar.

Iniciado por jorgeabreo

Yo creería que si la estructura se repite varias veces, deberías meter eso en un pequeño contenedor, que en este caso podría ser un <li>

Como comento en el post, no puedo modificar el Html.

No entiendo eso. ¿donde esta el problema en el h1 cuando la imagen es más alta que el parrafo?

Quizás no me explicado bien.
Quiero decir que si la imagen es más alta que el texto <p>, el <h1> posterior se colapsa con la imagen y queda flotado a la izquierda.