Ir al contenido

Este post hace más de dos años que no se ha revisado, es posible que la información publicada sea obsoleta o las referéncias no existan.

Evitar desbordamientos de titulares después de una imágen flotada.

Otro método para controlar la maquetación cuando el contenido se genera dinámicamente o el cliente no contempla ciertos detalles relacionados con la misma.

En este caso

En el supuesto de que exista una imagen flotada y el texto que se ubica al lateral sea más corto que el alto de la imagen si este va seguido de un titular, este titular se colapsa, supongamos que lo que nos interesa es que el titular se mantenga como un elemento de bloque, eliminando la posibilidad de varios desbordamientos del mismo tipo.

Ejemplo de titular desbordados por una imagen

Ejemplo de titular desbordado por una imagen

Pseudoelementos para limpiar

Podemos usar el pseudoelemento del titular para limpiar (clear) la parte superior y así ocupe el sitio que le corresponde.

h2:before{
    content:"";
    display: block;
    clear: both;
    height: 5px;
}

La altura viene determinada por el margen superior que tenga el elemento, ya que el pseudoeleneto no hereda las propiedades “box-model” del elemento.

h2{
    margin:5px 0;
}

Y eso es todo.

See the Pen Titulares colapsados by Jose Oliveras (@joliveras) on CodePen.