推荐用 <div class="pullquote"> 替代 <aside><blockquote>：语义中性、CSS易维护、避免浏览器隐式样式干扰；浮动方案仍适用，因其绕排自然、兼容性好；需设响应式断点、显式行高与基线对齐。
侧边引述框该用什么HTML结构
别用 <aside> 套 <blockquote> —— 语义没错，但默认样式几乎为零，还得重写所有定位和字体，反而增加排版负担。真实场景里，多数长文引述只是视觉强调，不是独立语义区块。
推荐直接用 <div class="pullquote">：
- 语义中性，不干扰阅读流
- 类名明确，CSS好定位、好维护
- 避免浏览器对 <aside> 的隐式 margin 或 display 行为（比如 Safari 会加额外间距）
- 如果真需要语义，再用 role="note" 补充，不强求标签嵌套
CSS浮动方案为什么现在还值得用
很多人一提“浮动”就想到过时、清除浮动麻烦，但对侧边引述框这种固定宽度、位置明确的元素，float: right 仍是兼容性最好、行为最可预测的方案。
关键点：
- float 能天然让正文文字自动绕排，不用 shape-outside 这种新特性兜底
- 所有主流浏览器（包括 IE11）都支持，无需前缀或 polyfill
- 不触发 BFC 导致的 margin 吞并问题（对比 display: inline-block 或 position: absolute）
- 示例：
.pullquote {<br> float: right;<br> width: 30%;<br> margin: 0 0 1em 1.5em;<br> font-size: 1.2em;<br> font-style: italic;<br>}
响应式断点下怎么避免引述框挤垮正文
常见错误是只在桌面端设 float，小屏一缩，引述框要么卡在行首把段落顶歪，要么文字重叠。
必须加断点控制：
- 在 @media (max-width: 768px) 下取消 float，改用 display: block 和居中
- 宽度从百分比切到固定值（如 width: 90%），避免小屏下 30% 反而太窄
- 补一句 clear: both，防止上一个浮动元素影响布局
- 别忘了重设 margin：小屏下左右外边距太大，会吃掉可用宽度
字体和行高不匹配导致引述框“飘起来”
引述框常被设成斜体+大号字，但没同步调 line-height，结果和正文字行基线对不齐，看起来像悬浮在半空。
立即学习“前端免费学习笔记（深入）”；
解决办法很直接：
- 引述框的 line-height 必须显式设置，别依赖继承（正文字行高通常是 1.5，引述框设 1.4 更稳）
- 用 vertical-align: baseline 确保和当前行文字对齐（尤其当它出现在段中而非段首时）
- 如果用了 font-size: 1.2em，建议搭配 line-height: 1.333（即 1.2 × 1.111 ≈ 1.333），保持行高比例一致
侧边引述框真正的难点不在怎么“做出来”，而在于它和正文字行高、段间距、断点切换之间的连锁反应——改一个值，三处可能出错。动手前先在几个典型段落里试排，比写完再调快得多。
