Html 参与BFC/IFC方式的差异

据我所知，

溢出：隐藏

和

显示：内联块

在

.mid column

中建立一个新的BFC。然而，前者将使

.mid column

成为块框，而后者将使其成为原子内联级别的框

使用溢出：隐藏

。左栏{
浮动：左；
背景颜色：灰色；
}
.右栏{
浮动：对；
背景颜色：灰色；
}
.中柱{
溢出：隐藏；
}

左列
右栏
中柱
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

左内栏
右内栏

参与IFC而非BFC如何影响布局

内联级别框在内联行框中流动，如文本。就这些。长方体参与的格式化上下文对长方体可能为其内容建立的任何格式化上下文（如果已建立）没有影响

.mid column

本身在显示为内联块时，参与由匿名块框（为此目的而创建）建立的IFC，但就

.mid column

的后代而言，他们参与由

.mid column

建立的BFC。在这个BFC之外发生的任何事情都与他们无关，BFC之外的元素永远不会干扰在这个BFC中发生的块布局

第二个演示中围绕

.mid column

生成的匿名块框参与根BFC

.wrapper

不会在两个演示中建立BFC。由于浮动占用了

.wrapper

（以及匿名块框）的可用宽度，因此

.mid column

没有足够的空间与浮动垂直对齐，这就是为什么

.mid column

被向下推的原因

---

相关链接已在评论中提供；CSS2第9.4节告诉您需要知道的一切。

他们创建的BFC是相同的。但是，他们参与BFC的方式（在后一种情况下是IFC）是完全不同的。@Alohci您的意思是由

display:inline block

创建的BFC是IFC？否。

display:inline block

参与的IFC。它可能会也可能不会建立IFC，这取决于IFC的内容。根据你的例子，它不会建立IFC。@Alohci很抱歉，但我不能理解这一点。请帮我清理一下：在我的第二个演示中，在

中间的列中创建了一个BFC，IFC在哪里？IFC是包含在
中列
，还是包含
中列
？另外，您所说的“参与”是什么意思？IFC由在
.wrapper
div内部和
.mid column
div外部的创建。我鼓励您仔细阅读。好的，现在我明白了，
.mid column
本身是否参与IFC或BFC不会影响布局，
.mid column
的内容，但为什么
.mid column
本身在第一个演示中插入两个浮动块之间，而在第二个演示中被“向下推”？我认为它应该“像文本一样内联流动”，因此它的行为与第一个演示中的一样。@孙庆尧：整个框被视为一个单独的实体单元，就像一个字母，无法拆分。这就是原子内联的意思。既然这个盒子是不能拆开的，唯一的方法就是把它往下推，这样就不会被浮子挡住了！我还有一个问题：匿名方块真的存在吗，还是仅仅是一个假想的假设？根据：为了更容易定义格式，我们假设“某些文本”周围有一个匿名块框。“假设”这个词闻起来很可疑……哈哈，你无法用CSS选择它们，也无法在浏览器中查看它们，所以你的猜测和我的一样好……@孙庆尧：你误读了。这是在说线框，而不是内联块。