渲染树元素判定疑问：为何部分不可见元素仍被纳入？

咱们先搞懂浏览器构建渲染树的核心逻辑：渲染树只包含「会参与页面布局、渲染流程」的元素，不是单纯看最终是否“可见”。下面分开说这几种情况：

• display: none的元素：这个属性是直接让元素完全脱离文档流，不仅视觉上消失，连它原本应该占据的布局空间也会被移除，而且它不会对任何其他元素的布局、堆叠产生任何影响。浏览器会直接跳过这个元素的渲染节点构建——既然它对整个页面的渲染结果没有任何贡献，自然没必要放进渲染树里。

• height: 0的元素：虽然它看起来“看不见”，但它仍然处于文档流中。比如它可能有padding、border（即使高度为0，这些属性还是会占据空间），或者内部有溢出的内容；另外它的存在还可能触发外边距折叠等布局规则，影响相邻元素的位置。浏览器必须把它放进渲染树，因为它实实在在参与了页面的布局计算流程，只是最终视觉高度为0而已。

• position: absolute; left: 100%的元素：这类元素虽然脱离了文档流，但它的尺寸计算、位置定位仍然依赖于父元素的布局信息，而且它会参与页面的堆叠上下文（比如z-index会影响它和其他元素的层级关系）。甚至如果后续子元素的样式调整（比如right: 0），它可能又回到可视区域。浏览器不能提前判定它“没用”，所以必须把它纳入渲染树，完成它的尺寸、位置计算，只是最终渲染到了可视区外面而已。

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