本文讲解如何通过 CSS Flexbox 布局，让 .third 元素的 margin-left 相对于前一个兄弟元素（.second）而非父容器左边缘生效，从而实现可控的横向间距。
本文讲解如何通过 css flexbox 布局，让 `.third` 元素的 `margin-left` 相对于前一个兄弟元素（`.second`）而非父容器左边缘生效，从而实现可控的横向间距。
在传统浮动（float）布局中，.third 的 margin-left: 10px 实际是相对于其
包含块（即 .first）的左内边距边缘
计算的，而非紧邻的 .second 元素右侧——这导致无法实现“紧贴前一个元素后留出 10px 间隙”的预期效果。根本原因在于浮动元素脱离文档流，后续元素的定位逻辑复杂且不可靠。
现代推荐解法是采用
Flexbox 布局
：将父容器 .first 设为 display: flex，使子元素成为弹性项目，天然沿主轴（默认水平）依次排列。此时 .third 的 margin-left 即真正作用于 .second 的右边界之后，实现所见即所得的间距控制。
同时，为防止图片容器 .second 在空间不足时被压缩（尤其当 .third 内容较长时），需添加 flex-shrink: 0 确保其宽度严格保持 200px 不变。
✅ 完整可运行代码如下：
⚠️ 注意事项：
避免混用 float 和 flex —— 移除 .second 中的 float: left，它在 Flex 容器中无效且可能引发兼容性问题；
若需垂直居中对齐，可在 .first 中添加 align-items: center；
对于旧版浏览器兼容性要求极高的场景，可考虑 inline-block + vertical-align 替代方案，但 Flexbox 是当前标准、简洁且可靠的首选。
总结：Flexbox 不仅解决了“外边距相对前一兄弟元素”的布局需求，更提供了可预测、易维护的响应式能力——掌握 display: flex 及其基础属性（如 flex-shrink），是构建现代网页布局的关键一步。
test