Whats the CSS to make something go to the next line in the page? [closed]

Question

How can I make an element automatically be positioned on a new line in the page? In HTML I could use <br>, but how do I add something like a line-break in CSS?

Say I have the following code for example:

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

The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS?

Another example is when using display: inline-block or 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; } 

How can I move one of the <div>s on a new line to create a new row?

Answer 1

There are two options that I can think of, but without more details, I can't be sure which is the better:

#elementId {     display: block; } 

This will force the element to a 'new line' if it's not on the same line as a floated element.

#elementId {      clear: both; } 

This will force the element to clear the floats, and move to a 'new line.'

In the case of the element being on the same line as another that has position of fixed or absolute nothing will, so far as I know, force a 'new line,' as those elements are removed from the document's normal flow.