Question

我有3个街区一个父母，两个孩子。全部漂浮。子块占宽度的百分比（30％和70％）。其中一个（宽度70％）具有负边距，等于其自身宽度（margin-left:-70%）。因此它向左移动并覆盖第一个（宽度30％）块。但是父块也是float：left，无论如何都会保存宽度。

请参阅： online example

.main-container {
  float:left;
}

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

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

为什么父块不会按水平线收缩？
所有块如何计算宽度？

我想 - 父母从子块的总宽度计算它的宽度（并且不管它们中的哪一个被移位）。子块的宽度取决于它们的内容。我在哪里可以阅读以了解这种行为？

Answer 1

由于.main-container为div（属性为display: block），因此宽度基于父容器。 .main-container宽度的子项也基于父容器（.main-container）。

所以在这种情况下，孩子的宽度是基于父母的宽度而不是相反。

另外，考虑一下：如果孩子的父母是35％宽，但由于孩子的边缘和位置，父母的宽度会减少，那么孩子的宽度也应该减小，导致父母的宽度减小，导致.....和等等，直到它们的所有宽度变为0。

Answer 2

只有在完全知道子块的宽度时才有效！

See the online Example

.main-container {
  float:left;
}

    .sidebar-left {
      float:left;
      width: 300px;
    }

    .sidebar-right {
      width: 700px;
      margin-left:-700px;
    }

在这种情况下，父级可以更改它，而不会影响其子元素。

要知道这种行为的原因，请查看其他答案 - Justas！

为什么浮动父母的宽度不取决于其孩子的负边缘？

2 个答案: