Question

我想了解为什么下面的css中的.item-wrap只计算它的宽度*，好像.floatleft2不在那里，而.items包含.item-wrap我清楚地知道.floatleft2就在那里。

我希望.containingbox“收缩包装”内容，但不希望.item包裹“过早”，即在仍有额外的屏幕空间时。（参见下面的'工作'修复）。

我已经找到了解决方法，但CSS中的哪个规范会导致.floatleft2，.item-wrap和.item之间的这种互动，导致.item-wrap宽度不宽足以包含所有.item s？

jsfiddle demo (code reproduced below)

jsfiddle demo with 'working' inline fix

<body>   
<h1>float:left on .containingbox, with item-wrap, with floatleft2,  causes premature wrapping of .item</h1>
    <div class="containingbox">
        <div class="floatleft2"></div>
        <div class="item-wrap">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

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;
}

Answer 1

当您浮动.floatleft2而不是.item-wrap时，.floatleft2将从容器框normal flow（which gets its own block formatting context from being floated itself）中取出，并{{1布局好像.item-wrap不在那里。由于.floatleft2没有浮动，因此它的行为类似于常规的块级元素，使用自动宽度和拉伸来按section 10.3.3调整容器。

容器水平放大以适合.item-wrap及其浮动项目的原因是，当从.item-wrap取出容器的正常流量时，容器不再需要帐户大小为.floatleft2。它只考虑.floatleft2的内容，它们本身也是浮动的。

根据section 10.3.5，当没有指定显式宽度（它使用自动宽度）时，浮动元素的宽度是缩小到适合的。 CSS2.1没有说如何来实现收缩到适合，但它确实说应该使用缩小到适合。在这种情况下，容器缩小到仅适合浮动项目在一条线上所需的最小宽度。 .item-wrap的宽度永远不会相关，除非它应该伸展以适应容器建立的范围，如上所述。

当发生.item-wrap时，浮动项浮动到元素的左侧（与浮动项目时看到的基本行为相同），无论是.floatleft2或容器的布局。这会导致某些项目换行到下一行，因为容器元素的大小都不会更改为.item-wrap。

Answer 2

您正在将div类从block级元素转换为inline元素。

你应该使用float:left;并删除display:inline

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

这是工作演示。 http://jsbin.com/vicusesu/1/edit

Answer 3

这是因为float: left和.float-left2上有.item但.item-wrap上没有.item-wrap。这有效地从物品包装中移除了所有浮动物品（它们是浮动的），同时它仍然保持与它们在那里相同的宽度。

如果您向{{1}}添加浮动（左或右），则不会出现此问题。

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

3 个答案: