Css 为什么这个浮动父级会计算它'；在考虑兄弟姐妹之前的宽度？

我试图理解为什么下面css中的

.item wrap

只计算它的宽度*就好像

.floatleft2

不存在一样，而

.item wrap

所包含的

.items

清楚地知道

.floatleft2

存在

我希望.containingbox“收缩包装”内容，但不希望

.item

s“过早”包装，即在仍有额外屏幕空间时。（请参阅下面的“工作”修复）

我已经找到了解决方法，但是CSS中的哪种规范导致了

.floatleft2

、

.item wrap

和

.item

之间的这种交互，使得

.item wrap

宽度不够宽，无法包含所有

.item

---

---

---

您正在将div类从

block

level元素转换为

inline

元素

您应该使用

float:left

；并移除

显示：inline

.item-wrap {
    /*display: inline;*/
  float: left;
    border: 1px solid #0FC;
    height: 3px;
}

---

这是工作演示

这是因为您在

上有
float:left
。float-left2

和

。item

但在

上没有。item wrap

。这将有效地从项目包装中删除所有浮动项目（它们是浮动的），同时仍保持相同的宽度，就好像它们在那里一样

---

如果在

.item wrap

中添加浮动（左或右），则不会出现此问题。

当您浮动

时。floatleft2

但不是

。item wrap

，

.floatleft2

从容器盒（）的底部取出，

。item wrap

的布局就像

。floatleft2

不在那里一样。由于

.item wrap

不是浮动的，因此它的行为类似于常规的块级元素，使用自动宽度和拉伸以根据调整容器

将容器水平调整为刚好适合

.item wrap

及其浮动项目的原因是，当

.floatleft2

从容器的正常流中取出时，容器不再需要考虑

.floatleft2

的大小。它只考虑

.item wrap

的内容，这些内容本身也是浮动的

根据，当未指定显式宽度（使用自动宽度）时，浮动元素的宽度将收缩以适合。CSS2.1没有说明如何实现“收缩到适合”，但它确实说明了实现应该使用“收缩到适合”。在这种情况下，容器将缩小到一行上容纳浮动项目所需的最小宽度。

.item wrap

的宽度与此无关，除非它应该拉伸以适应容器建立的边界，如上所述

---

然后，当引入

.floatleft2

时，浮动项会浮动到该元素的左侧（与浮动项本身时看到的基本行为相同），而不管

.item wrap

或容器的布局如何。这会导致某些项换行到下一行，因为两个容器元素都没有更改其大小以说明

。floatleft2

这会导致当窗口较小时，所有项都跳转到floatleft2下方，而不是第一行上的项，添加浮动：在项目包裹上向左移动会导致整个项目集在视口很小时跳转到自己的行。有趣的是，“收缩到适合”知道如何在项目被floatleft2移出位置之前在一行上调整项目的宽度！

body {
    margin: 20px;
    padding: 0;
    font: normal 85% arial, helvetica, sans-serif;
    color: #000;
    background-color: #fff;
}
.containingbox {
    height: 200px;
    border: 1px solid #000;
    float: left;
}
.item-wrap {
    border: 1px solid #0FC;
    height: 3px;
}
.item {
    border: 1px solid #F09;
    width: 50px;
    float: left;
    position: relative;
    margin: 0 10px 0 0;
    height: 75px;
}
.item::before { content: "item"; position: absolute; }
.floatleft2 {
    height: 75px;
    background-color: #000;
    border: 1px solid #000;
    float: left;
    margin: 0 10px;
    display: block;
    width: 50px;
}

.item-wrap {
    /*display: inline;*/
  float: left;
    border: 1px solid #0FC;
    height: 3px;
}