为何右侧浮动元素后的Flexbox负左外边距无法生效？

先看你的代码示例：

CSS 代码 #

.float {float:right;width:30px;height:30px;background:red;}
.flex {display:flex;margin-left:-50px;}
.item {margin-left:50px;}
.inlineblock {margin-left:-50px;}
.inlineblock .item {display:inline-block;}

HTML 代码 #

<h2>Without float</h2>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

<h2>With float</h2>
<div class="float"></div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

<h2>With float and inline-block</h2>
<div class="float"></div>
<div class="inlineblock">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

核心原因：块级元素与行内块元素的宽度计算规则差异 #

问题的本质是flex容器默认是块级元素，而inline-block是行内块元素，两者在处理负外边距时遵循完全不同的宽度计算规则：

• 块级元素（flex容器）的width:auto特性
  块级元素默认宽度为auto，会自动撑满父容器的可用宽度。此时设置margin-left:-50px，浏览器会自动加宽元素的宽度，让margin-left + 元素总宽度 + margin-right等于父容器宽度。也就是说，负左外边距被宽度的自动增加抵消了，元素左边界并没有真正左移，只是整体变宽了。
  无浮动元素时，子元素的margin-left:50px刚好抵消了容器的宽度变化，看起来负外边距生效；但右侧有浮动元素时，flex容器的内容区被浮动元素挤占，子元素无法再通过margin抵消宽度变化，就出现了负外边距“失效”的视觉效果。

• 行内块元素（inline-block容器）的宽度规则
  行内块元素默认宽度是内容宽度，不会自动撑满父容器。设置margin-left:-50px时，浏览器不会调整它的宽度，而是直接让元素向左偏移50px，所以负外边距的效果能直接体现，不受右侧浮动元素影响。

验证与解决思路 #

如果给flex容器设置固定宽度（比如width:calc(100% - 30px)，减去浮动元素的宽度），再设置margin-left:-50px，你会发现负外边距的效果和inline-block容器一样生效了——因为固定宽度打破了块级元素width:auto的自动调整规则。

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