什么时候在浮动元素之前插入新行？

Question

我创建了一个文本，并向其中添加了一些左浮动框。但出于某种原因，他们的行为有所不同。第一个框打破了它之前的行，但第二个没有。我不明白，为什么。 JSFiddle：https://jsfiddle.net/qt9q7dn4/

（绿色文字是红色框后面的文字）

CSS:

div {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 5px;
}

.after {
    color: lime;
    font-weight: bold;
}

HTML:

<p>Lorem 
<div></div> 
<span class="after">ipsum</span> 
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, 
<div></div> 
<span class="after">vitae
</span> facilisis nibh. Integer eu eros 
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>

Answer 1

将 div 移到外部段落并关闭段落。

<div></div>

<p>Lorem  <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>

<div></div> 

<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>

Fiddle

什么时候在浮动元素之前插入新行？

When is a new line inserted before a floated element?

html

css

css-float