绝对定位文字和图片底部对齐偏差源于img默认inline特性及基线对齐机制；应统一vertical-align、用transformtranslateY微调，并在图片尺寸不确定时优先采用flex布局或top:50%+translateY(-50%)实现稳定居中。

是的，gap在现代浏览器Flex布局中完全可用，但Safari14.1以下及IE不支持；它由容器控制主轴与交叉轴间距，避免margin首尾空白问题，且不触发重排、不影响可访问性。

flex布局更健壮：设父容器min-height:100vh、flex-column，main加margin-top:auto推footer到底部；absolute定位需预留空隙且不自适应，仅适用于高度固定场景。

登录页表单应使用flex布局居中并控制宽度：.login-form设display:flex、align-items/justify-content:center、min-height:100vh；.login-box设max-width:400px、width:100%适配响应式。

浮动列表最后一行元素塌陷或错位是因浮动脱离文档流导致父容器高度塌陷；clearfix通过伪元素插入清除浮动的块级内容来修复，必须作用于直接父容器；现代推荐用flex布局替代浮动。

用grid划分导航区域、flex管理菜单项对齐与折行，兼顾横向流式布局、垂直居中与自适应折叠：外层grid设三列（auto1frauto）并align-items:center，菜单区flex-wrap:wrap；响应式优先缩窄grid列宽，最后才切flex-direction:column并加max-height/o...