直接对 float 元素设 writing-mode: vertical-rl 会导致文字不环绕，因其改变内容流方向而 float 仍按水平模式计算行盒；应保持外层 horizontal-tb、内层用 transform 旋转或配合固定宽高与 text-orientation: mixed。
float 元素和 writing-mode 混用时文字不环绕？
直接给 float: left 的元素加 writing-mode: vertical-rl，文字大概率不会按预期“垂直环绕”——而是整个块被挤到一边，后续段落从新行开始，像普通块级元素一样断行。这是因为 writing-mode 改变的是**内容流方向**，但 float 的包裹逻辑仍基于默认的水平书写模式（horizontal-tb）下的行盒（line box）尺寸计算，两者底层机制不协同。
真正能触发文字环绕的 vertical float 组合
必须让浮动容器本身保持水平书写流，仅内部文字旋转。常见有效做法是：外层浮动元素用默认 writing-mode: horizontal-tb，内层文字用 transform: rotate(90deg) 或 transform: rotate(-90deg)；或用 display: inline-block + writing-mode 配合 float，但需手动控制宽高避免撑开整行。
-
float: left容器设固定width和height（如width: 2em; height: 10em;），内部文字用writing-mode: vertical-rl+text-orientation: mixed（保证数字/拉丁字母正立） - 若用
transform: rotate()，注意它会脱离文档流影响行高，建议配合line-height: 0和父级font-size调整视觉对齐 - 不要对
float元素直接设writing-mode: vertical-*，否则浏览器会重算浮动边界为垂直方向，导致后续文本无法“绕”进其右侧空白区
兼容性与排版断裂风险
writing-mode 在 Chrome/Firefox/Edge 中支持良好，但 Safari 对 vertical-rl + float 的组合存在渲染延迟或换行错位，尤其在动态插入内容后。更稳妥的替代路径是放弃 float，改用 shape-outside 配合 clip-path 构造垂直文字区域轮廓，再用 float 触发环绕——但这就不再是纯 CSS 浮动布局了。
- 测试时务必在 Safari 中检查首行文字是否突兀跳到下一段开头
-
text-orientation: mixed是关键，否则中文竖排时英文字母会侧躺，破坏可读性 - 移动端 viewport 缩放可能放大
float元素的占位偏差，建议用max-width限制其宽度上限
一个可用的最小化示例
<div class="wrap">
<div class="vertical-label">标签</div>
<p>这是一段很长的文字，需要绕过左侧垂直显示的标签区域……</p>
</div>
.vertical-label {
float: left;
width: 2em;
height: 8em;
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 14px;
}
.wrap::after {
content: "";
display: table;
clear: both;
}
注意：这里 .vertical-label 的 width 实际控制的是文字“列宽”，height 控制“行数”，数值需根据字号和文字长度反复微调。浮动失效往往不是代码写错，而是 height 不够导致文字溢出、浏览器放弃环绕计算。
立即学习“前端免费学习笔记（深入）”；
