CSS浮动布局问题：为何代码无法实现预期的span换行效果？

你的代码达不到预期效果的核心原因有两个：

1. 浮动元素不受<br>控制
   你给所有目标span都设置了float: left，浮动元素会脱离正常文档流，<br>标签的换行规则只对正常流内的元素生效，所以加了<br>也没法让浮动的span强制换行。

2. 浮动覆盖了块级元素的独占特性
   虽然你给span设置了display: block（块级元素默认独占一行），但元素一旦设置浮动，块级元素的独占行为就会被覆盖，浮动元素会优先横向排列，直到容器空间不足才会换行。

要实现「前两个span各占一行，后三个同行」的效果，不需要用到浮动，直接利用元素的默认 display 属性即可：

修改后的CSS #

.pt_t {
  font-family: arial;
  font-size: 20px;
  color: black;
}
.pt_p {
  font-family: arial;
  font-size: 40px;
  color: black;
  display: block; /* 让第一个span独占一行 */
}
/* 给第二个span单独设置块级属性 */
.pt_t.line-2 {
  display: block;
}

对应HTML #

<span class="pt_p">1. Line</span>
<span class="pt_t line-2">2. Line</span>
<span class="pt_t">3. Line</span>
<span class="pt_t">is</span>
<span class="pt_t">here</span>

如果一定要保留浮动（比如有其他布局需求），则需要给前两个浮动元素添加清除浮动的样式，确保后续元素不会向上对齐：

/* 新增清除浮动类 */
.clear-float {
  clear: both;
}

<span class="pt_p">1. Line</span>
<div class="clear-float"></div>
<span class="pt_t">2. Line</span>
<div class="clear-float"></div>
<span class="pt_t">3. Line</span>
<span class="pt_t">is</span>
<span class="pt_t">here</span>

内容的提问来源于stack exchange，提问作者RaiuProGram