为什么设置浮动的<span>会和相邻<span>双击时同时被选中？如何解决？

问题原因 #

这个现象是浏览器默认的文本选中逻辑的设计结果，而非Bug：

• 浏览器判断文本是否属于同一可选中单元，优先依据DOM结构中的文本节点相邻关系，视觉布局的变化不会影响这个判定规则。
• 只要两个文本节点之间没有被块级（display: block）元素分隔，也没有可识别的分词分隔符，就会被判定为连续文本，双击时会全选。
• 浮动（float）、绝对定位（position: absolute）只会修改元素的视觉渲染位置，既不会改变DOM节点的相邻关系，也不会修改元素本身的display类型，两个inline/inline-block元素即使视觉上分开，内部的文本节点仍然会被判定为连续。
• 案例4中插入的空格没有生效，是因为浮动元素脱离了正常文档流，两个span之间的空格会被渲染到不可见位置，无法起到分词分隔的作用。
• 换成块级div后双击可以分开选中，就是因为块级元素天生会被浏览器识别为不同的文本块分隔符。

解决方法 #

可以根据业务场景任选以下方案：

• 方案1：将两个元素都设置为display: block，无需修改其他布局属性，浏览器就会自动将二者内部的文本判定为独立的选中单元。
• 方案2：如果必须保留inline/inline-block属性，可在两个元素之间插入零宽空格​，该字符视觉上完全不可见，但会被浏览器识别为合法的分词分隔符，示例代码如下：

  <span style="float:right">123</span>&#8203;<span>456</span>
  

• 方案3：给需要独立选中的元素添加CSS属性user-select: contain，该属性会强制限制选中范围只能在当前元素内部，不会延伸到相邻元素，现代浏览器均兼容该属性。

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