¿Cuál es el CSS para hacer que algo vaya a la siguiente línea de la página?

Question

¿Cómo puedo hacer que un elemento se coloque automáticamente en una nueva línea en la página? En HTML podría usar <br>, pero ¿cómo puedo agregar algo como salto de línea en CSS?

Decir que tengo el siguiente código de ejemplo:

<p>Lorem ipsum dolor sit amet, 
    <span id="elementId">consectetur adipisicing elit.</span> 
    Magni totam velit ex delectus fuga fugit</p> 

El lapso sigue en la posición en la misma línea que el resto del texto. ¿Cómo puedo mover el texto del tramo en una nueva línea puramente a través de CSS?

Otro ejemplo es cuando se utiliza display: inline-block o float:

<div class="smalldiv">Lorem ipsum dolor sit amet</div> 
<div class="smalldiv">Lorem ipsum dolor sit amet</div> 
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div> 
<div class="smalldiv">Lorem ipsum dolor sit amet</div> 

.smalldiv { 
    display: inline-block; // OR 
    float: left; 
} 

¿Cómo puedo mover una de las <div> s en una nueva línea para crear una nueva fila?

Answer 1

Hay dos opciones que se me ocurren, pero sin más detalles, que no pueden estar seguros de que es el mejor:

#elementId { 
    display: block; 
} 

Esto forzará el elemento a una 'nueva línea' si no está en la misma línea que un elemento flotante.

#elementId { 
    clear: both; 
} 

Esto forzará el elemento a borrar los flotadores, y pasar a una 'nueva línea'.

En el caso del elemento de estar en la misma línea que otra que tiene position de fixed o absolute nada va, por lo que yo sé, forzar una 'nueva línea', como esos elementos se eliminan del flujo normal del documento .

Answer 2

Depende de por qué el objeto está en la misma línea en primer lugar.

clear en el caso de los flotadores, display: block en el caso de contenidos en línea que fluye de forma natural, nada va a derrotar position: absolute como el elemento anterior será sacado del flujo normal por ella.

Answer 3

Tener la visualización de elementos como un bloque:

display: block;