应优先用flexbox替代float解决图片错位问题，因其能天然实现等高对齐、可控换行与响应式布局；若必须用float，可通过overflow:hidden清除浮动、vertical-align:top对齐或inline-block替代，并避免负margin等临时方案。

mPDF不支持CSSGrid布局，且对float的解析依赖完整HTML结构和显式宽度控制；正确做法是预先拼接HTML字符串、为浮动元素设置小于50%的宽度，并插入clear:both清除浮动。

背景图片未铺满全宽，通常因min-width:100%引发水平滚动条或父容器约束所致；正确做法是移除冗余宽度声明，依托background-size:cover+background-position:center并确保元素自然撑满视口。

flex布局中用margin-left:auto推最后一个元素靠右的原理是利用flex剩余空间分配机制：该元素“吃掉”左侧所有可用外边距，从而右移；需父容器display:flex且子元素为直系子项，不可混用justify-content:flex-end或设置flex-grow:1。

本文讲解如何通过CSS绝对定位将.div4精确放置在父容器.div1的右上角内部，关键在于为子元素设置position:absolute并配合right/top值，同时确保父容器具有position:relative作为定位上下文。

子元素margin会让父元素“被撑开”是因margin塌陷：子元素垂直外边距与父元素边界合并；触发BFC（如display:flow-root）可彻底解决，语义清晰且无副作用。