为何在<pre>元素内用float定位的div无法并排显示？

问题代码 #

CSS代码：

.ex-box {
  border: 3px solid #aaa;
  background-color: #eee;
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 30px;
}

.ex-box:last-of-type {
  clear: right;
}

HTML代码：

<pre>
  <div class="ex-box">Box 1</div>
  <div class="ex-box">Box 2</div>
</pre>

核心原因分析 #

<pre>元素的默认特性是保留内部所有空白字符（空格、换行、制表符）并原样渲染，同时以块级元素形式展示，这两点和普通块级父容器（如<div>）的差异，直接导致了浮动元素的布局异常：

• 空白节点干扰浮动布局：<pre>内<div>前的缩进空格、换行，会被当作真实文本节点渲染。浮动元素（float: left）允许行内内容环绕自身，这些空白文本会占据水平空间，导致第二个浮动盒子无法和第一个完全并排，或出现位置偏移。而普通<div>会忽略这类空白字符，浮动元素布局不受干扰。

• clear属性的表现偏差：代码中第二个盒子设置了clear: right，作用是让元素右侧不允许有浮动元素。但在<pre>的空白文本影响下，浏览器可能将空白占位判定为“右侧存在内容”，或空白触发的换行激活了clear规则，最终让第二个盒子换行显示；而在普通父容器中，clear: right对左浮动的第一个盒子无换行影响——因为第一个盒子右侧本就没有其他浮动元素。

额外说明 #

你提到float已过时，flex/grid是更优方案，这点完全正确。现代布局方案能规避旧特性和特殊元素交互产生的奇怪问题，代码也更简洁易维护。

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