[SOLUCIONADO] Salto de linea CSS3

[erxaca]

Hola compañeros,

tengo esto:

Código HTML:

<div id="conversacion">
    <p class="emisor">blabla</p>
    <p class="receptor">bleble</p>
    <p class="emisor">blabla</p>
    <p class="emisor">blabla</p>
</div> 

Y quiero hacer que esos p ocupen solo el contenido que albergan pero que los siguientes p aaprezcan en una nueva línea y para ello solo quiero hacer uso de CSS, quiero intentar no añadir más HTML y para ello aplico float:left y clear:both a los <p> pero no me parece algo muy limpio ¿hay algo en CSS3 que haga este efecto?

Añado que el inconveniente de ese estilo es que el div conversación no crece a medida que se añaden <p>a causa de la propiedad float.

Un saludo.

[pzin]

Puedes hacer algo así:

Código CSS:

p {
  display: inline-block;
}
 
p:after {
  display: block;
}
 

[erxaca]

Hola pzin, edito, pues ya no corresponde. Parece que no hace efecto el p:after, probaré más con esa propeidad. Para que te hagas una idea, quiero hacer la interfaz de WhatsApp.

[pzin]

Código CSS:

p {
  display: inline;
}
 
p:after {
  display: block;
  content: '';
}
 

Así mejor.

[erxaca]

Gracias por tu solución pzin pero no me valía pues necesito elementos en bloque para aplicar rellenos etc. La solución más óptima que he encontrado ha sido esta:

Código HTML:

p {display:table;}

Un saludo ;)