关于BFC不会被浮动元素遮盖的一些解释

简介

在清除浮动一文中提到BFC不会被浮动元素遮盖，并没有详细探究表现行为。规范中指出，在同一个BFC内，作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实，浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。

例证

创建两个浮动元素和一个BFC，然后改变BFC的margin值和浮动元素的margin值，观察它们的位置。

.f1r {
background: skyBlue;
float: left;
width: 200px;
}
.f2 {
background: yellow;
float: right;
width: 200px;
}
..bfc {
background: pink;
overflow: hidden;
zoom:;
border: 5px solid teal;
}

可见BFC的border-box不会覆盖浮动元素。

为了进一步验证BFC的border-box不会覆盖浮动元素的margin-box，我们设置.f1的margin-right：30px;

这样就可明显看出BFC具体影响这两个元素的哪种盒模型的覆盖。

另外，如果设置.bfc的宽度值过大（两个浮动元素的水平分量与bfc的水平分量之和大于包含块的宽度），那么.bfc会向下放置知道有足够空间容纳为止。

使用

那么这个技巧对我们有什么用处呢？近日在BFC下多栏自适应布局 一文中见识到了BFC不会被浮动元素覆盖的用处。对于一个浮动侧边栏，我们可以触发右边栏的BFC，这样右边栏就不会被浮动侧边栏所覆盖，但是如何设置两栏之间的间隔呢？上文已经提到了，我们可以设置右边栏的padding-left值，也可以设置浮动左边栏的margin-right值，通过这两种方法来设置间距，完成宽度自适应布局。