前端面试题-BFC(块格式化上下文)

一、BFC 的概念

1.规范解释

块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

2.通俗理解

  • BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品
  • 如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响。
  • 浮动元素会创建 BFC,则浮动元素内部子元素主要受该浮动元素影响,所以两个浮动元素之间是互不影响的

二、创建 BFC

  1. 根元素或包含根元素的元素
  2. 浮动元素 float = left | right 或 inherit(≠ none)
  3. 绝对定位元素 position = absolute 或 fixed
  4. display = inline-block | flex | inline-flex | table-cell 或 table-caption
  5. overflow = hidden | auto 或 scroll (≠ visible)

三、BFC 的特性

  1. BFC 是一个独立的容器,容器内子元素不会影响容器外的元素。反之亦如此。
  2. 盒子从顶端开始垂直地一个接一个地排列,盒子之间垂直的间距是由 margin 决定的。
  3. 在同一个 BFC 中,两个相邻的块级盒子的垂直外边距会发生重叠。
  4. BFC 区域不会和 float box 发生重叠。
  5. BFC 能够识别并包含浮动元素,当计算其区域的高度时,浮动元素也可以参与计算了。

四、BFC 的作用

1.包含浮动元素(清除浮动)

  • 浮动元素会脱离文档流(绝对定位元素也会脱离文档流),导致无法计算准确的高度,这种问题称为高度塌陷
  • 解决高度塌陷问题的前提是能够识别并包含浮动元素,也就是清除浮动

清除浮动

问题举例:如上左图所示,容器(container)没有高度或者 height = auto ,并且其子元素(sibling)是浮动元素,所以该容器的高度是不会被撑开的,即高度塌陷。

解决方法:在容器(container)中创建 BFC。

HTML

<div class="container">
        <div class="Sibling"></div>
        <div class="Sibling"></div>
</div>

CSS

.container { 
        overflow: hidden; /* creates block formatting context */ 
        background-color: green; 
} 
.container .Sibling { 
        float: left; 
        margin: 10px;
        background-color: lightgreen;  
}

特别提示:

  • 通过 overflow:hidden 创建 BFC,固然可以解决高度塌陷的问题,但是大范围应用在布局上肯定不是最合适的,毕竟 overflow:hidden 会造成溢出隐藏的问题,尤其是与 JS 的交互效果会有影响。
  • 我们可以使用 clearfix 实现清除浮动,这里就不多介绍了,想要了解的可以阅读前端面试题-clearfix(清除浮动)

2.导致外边距折叠

相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者

导致外边距折叠

HTML

<div class="Container"> 
    <p>Sibling 1</p> 
    <p>Sibling 2</p> 
</div>

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

如上图所示:红色盒子(Container)中包含两个绿色的兄弟元素(P),并且红色盒子设置 overflow: hidden; 则一个BFC 已经被创建,即导致外边距折叠。

理论上两个兄弟元素之间的边距应该是两个元素的边距之和(20px),但实际是 10px。这就是外边距折叠导致的。

2.1 折叠外边距的值

  • 两个相邻的外边距都是 正数 时,折叠外边距是两者中较大的值。
  • 两个相邻的外边距都是 负数 时,折叠外边距是两者中绝对值较大的值。
  • 两个相邻的外边距是 一正一负 时,折叠外边距是两者相加的和。

2.2 外边距折叠的条件是 margin 必须相邻!

3.避免外边距折叠

这一听起来可能有些困惑,因为我们在前面讨论了 BFC 导致外边距折叠的问题。但我们必须记住的是外边距折叠(Margin collapsing)只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC,它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ,就可以避免外边距折叠。

修改前面的例子并添加第三个兄弟元素,CSS不变。

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <p>Sibling 3</p> 
</div>

结果不会改变,还会折叠外边距,三个兄弟元素(P)将会以垂直距离为 10px 的距离分开。原因是三个兄弟元素都属于同一个 BFC。

创建一个不同的 BFC ,就可以避免外边距折叠。

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <div class="newBFC"> 
            <p>Sibling 3</p> 
        </div> 
</div>

CSS

.Container { 
            background-color: red; 
            overflow: hidden; /* creates a block formatting context */ 
} 
p { 
            background-color: lightgreen; 
            margin: 10px 0; 
}
.newBFC { 
            overflow: hidden; /* creates new block formatting context */ 
}

避免外边距折叠

当第二和第三个兄弟元素属于不同的 BFC 时,它们之间就没有外边距折叠。

阅读更多


GitHub [链接]

3.6k 声望
6k 粉丝
0 条评论
推荐阅读
代码注释,我们不一样
{代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码...} {代码.....

WEBING35阅读 3.1k评论 9

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.2k评论 9

GitHub [链接]

3.6k 声望
6k 粉丝
宣传栏