Como posso fazer com que um elemento seja posicionado automaticamente em uma nova linha na página? Em HTML eu poderia usar<br>, mas como adiciono algo como quebra de linha em CSS?

Diga que tenho o seguinte código, por exemplo:

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

O intervalo ainda está posicionado na mesma linha que o restante do texto. Como mover o texto do span em uma nova linha exclusivamente através de CSS?

Outro exemplo é ao usardisplay: inline-block oufloat:

<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;
}

Como mover um dos<div>stá em uma nova linha para criar uma nova linh