Html “新BFC”；“清算”；浮箱

如示例所示，应用

display:inline块到包含块似乎“清除”了其中的浮动框


.wrapper内联块{
显示：内联块；
}
.左栏{
背景色：青色；
浮动：左；
}

浮动

非浮动


浮动

非浮动

这是因为具有默认
宽度：auto
的内联块的大小取决于算法。CSS2.1没有完全定义该算法应如何处理浮动内容，但浏览器似乎做到了这一点：

内联块的大小忽略浮动
内联块内的线框与内联块一样宽
浮动缩小线框
因此，非浮动内容不再适合收缩的空间，因此换行到下一行
注意，没有清除，如果您使内联块足够宽，文本将显示在浮点旁边


.wrapper.inline-block{
显示：内联块；
}
.w400{
宽度：400px；
}
.包装纸{
边框：1px实心；
}
.左栏{
背景色：青色；
浮动：左；
}
缩小以适应内联块：

浮动

非浮动

显式宽度内联块：

浮动

非浮动

填充可用块：

浮动

非浮动

回答得很好！我在作业中增加了一个“后续问题”，你能回答吗？虽然通常不喜欢通过编辑提出新问题，但我认为在这种情况下，它可以使我的文章更完整。@sunqingyao这有点牵手，因为正如我所说的CSS2.1没有完全定义“收缩到适合”应该如何处理内部浮动。我的猜测是，该大小是在浮点移动到下一个块之前计算的，但是在它移动到下一个内联块之后计算的。这没有多大意义，因为浮点是块级别的，所以匿名块框应该像

一样包装文本。因此，行为应该是相同的，除非浮动不被视为块级别。