关于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: 1; 
border: 5px solid teal; 
}

图像 1

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

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

图像 2

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

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

使用

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