<分区>
html - 什么时候在 float 元素之前插入新行？
我创建了一个文本，并向其中添加了一些左浮动框。但出于某种原因，他们的行为有所不同。第一个框打破了它之前的行，但第二个没有。我不明白，为什么。 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>
最佳答案
将 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>
关于html - 什么时候在 float 元素之前插入新行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39280719/