留下的边距不适用于展示flex但是对内在的孩子如何工作？

Question

child1：side content，child2：display flex。

我需要child2向左移动150px。

如果我在child2上设置margin-left，它就无法正常工作。

但是如果我在child2的孩子身上设置margin-left就行了。

＆＃13;

＆＃13;

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* doesn't work */
}
.table {
  margin-left: -150px; /* doesn't work */
  display: flex;
}
.item {
  margin-left: -150px; /* works oyea */
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

＆＃13;

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么呢？笔：http://codepen.io/anon/pen/JGwVpP

Answer 1

那是因为浮动是流动的，因此它与.table-wrap重叠。但它减少了里面的线框长度。

然后似乎忽略了边距，但事实上并非如此：.table-wrap实际上是向左移动，但内容不是由于浮动。

相反，您应该使.table-wrap建立新的块格式化上下文（BFC）。然后它不会与浮动重叠。

例如，您可以使用overflow: hidden，display: inline-block或float: left建立BFC。在这里，前者会很糟糕，因为它会隐藏由于负边距而溢出的内容，所以请使用其中一个。

.side {
  width: 200px;
  float: left;
  position: relative;
}
.table-wrap {
  display: inline-block; /* Establish Block Formatting Context */
  margin-left: -150px;   /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

或者，由于您已经在使用flexbox，因此可以将.content设为灵活容器而不是浮动.side

.content {
  display: flex;
}
.side {
  width: 200px;
  position: relative;
}
.table-wrap {
  margin-left: -150px; /* Now this works */
}
.table {
  display: flex;
}
.stuff {
  width: 100px;
  height: 100px;
  background: green
}

<div class="content">
  <div class="side">
    side content
  </div>
  <div class="table-wrap">
    <div class="table">
      <div class="item"></div>
      <div class="stuff"></div>
    </div>
  </div>
</div>

Answer 2

在display: inline-block元素上尝试display: flex;而不是.table。