html - 为什么 float 父级的宽度不依赖于其子级的负边距？

Question

我有3 block 一个 parent ，两个 child 。都飘了 子 block 采用百分比宽度(30% 和 70%)。 第二个其中一个(宽度 70%)的负边距等于它自己的宽度(margin-left:-70%)。因此它向左移动并覆盖第一个(宽度 30%) block 。 但是父 block 也有 float:left，无论如何都节省了宽度。

请看: online example

.main-container {
  float:left;
}

    .sidebar-left {
      float:left;
      width: 30%;
    }

    .sidebar-right {
      width: 70%;
      margin-left:-70%;
    }

1. 为什么父 block 没有水平线收缩？

2. 所有的 block 如何计算宽度？

我想 - 父级根据子 block 的总宽度计算其宽度(并且无论其中一个是否移动)。子 block 的宽度取决于它们的内容。 我在哪里可以阅读以了解此行为？

Answer 1

由于 .main-container 是 div(具有属性 display: block)，它的宽度基于父容器。 .main-container 的 child 的宽度也基于父容器 (.main-container)。

所以在这种情况下， child 的宽度基于 parent 的宽度，而不是相反。

另外，考虑一下:如果子项的宽度是其父项的 35%，但是由于子项的边距和定位，父项的宽度减小了，那么子项的宽度也应该减小，从而导致父项的宽度减小，从而导致......和依此类推，直到它们的所有宽度都变为 0。