是什么让CSS进入页面的下一行？

Question

如何使元素自动定位在页面的新行中？在HTML中我可以使用<br>,但是如何在CSS中添加像换行符这样的东西呢？

假设我有以下代码,例如:

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

跨度仍与文本的其余部分位于同一行.如何仅通过CSS在新行上移动跨度文本？

另一个例子是使用display: inline-block或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;
}

如何<div>在新行上移动其中一个以创建新行？

Answer 1

我可以想到两个选项,但没有更多细节,我无法确定哪个更好:

#elementId {
    display: block;
}

这将迫使元素一个"新行" ,如果它不是在同一条线上的浮动元素.

#elementId {
     clear: both;
}

这将强制元素清除浮动,并移动到"新行".

在该元件为在同一行的另一个具有的情况下position的fixed还是absolute什么都不会,所以据我所知,迫使"新线",这些元件是从文档的正常流程中移除.

Answer 2

将元素显示为块:

display: block;

Answer 3

这首先取决于为什么某物在同一条线上。

clear在浮动display: block的情况下，在内联内容自然流动的情况下，没有什么会失败，position: absolute因为前一个元素会被它从正常流中取出。