likes
comments
collection
share

某外企面试题，你真的了解BFC吗？

作者站长头像
站长
· 阅读数 3

面试时，面试官问的问题绝不是随口问的，肯定是他想用这个问题去考察你的知识储备，往往很多时候都是有一道面试题，引出其他问题，而作为面试者就要引导面试官去问一些你自己知道的，且准备充分方面的问题。

下面就由一道浮动问题 / 防止高度塌陷 引出的什么是BFC，怎么产生的BFC，以及怎么解决这个问题。

防止高度塌陷

原因： 父元素不写高度时，子元素浮动后，导致父元素会发生高度塌陷（造成父元素高度为0）。

解决：

  1. 给父元素添加声明 overflow: hidden，优点：代码少，简单。缺点：不能和position定位配合使用，超出尺寸会被隐藏。其实display: table也时可以的。

  2. 在浮动元素下方添加空div，并给元素申明clear: both，保险起见，再加height:0，清除个别元素可能自带的height: 16px。 缺点：需要添加多余的空标签并添加属性。

  3. 用伪元素解决：

.box::after{
    content:'',
    display: block,
    clear: both,
    height: 0
}
  1. 父元素添加浮动，缺点：产生新的浮动问题，因为BFC。

好问题来了，什么是BFC，接下来就为大家介绍一下。

BFC

BFC 定义

  • BFC(Blcok formatting context) 直译为“块级格式化上下文”。他是一个独立的渲染区域，只有块级元素参与，它规定了内部块级元素的布局，并且与这个区域外部毫不相关，外部元素也不会影响这个渲染区域的元素。

  • 简单说：BFC 就是页面上的一个隔离的独立渲染区域，区域里边的子元素不会影响到外面的元素。外边的元素也不会影响到区域里面的子元素。

  • Box，盒子是CSS布局的对象和基本单位，直观点说，就是一个页面是由很多个盒子区域组成。元素的类型和 display 属性，决定了这个盒子区域的类型。

    • 不同类型的盒子区域内的子元素，会以不同的 Formatting Context (一个决定如何渲染文档的容器) 方式渲染。
    • 块级元素盒子，display属性为block、list-item、table的元素，会生成块级元素渲染区域。并且以 BFC(Blcok formatting context) 方式渲染。
    • 行级元素盒子，display 属性为inline、inline-block、inline-table的元素，会生成行级元素渲染区域。并且以IFC (inline formatting context) 方式渲染。
    • 所以，CSS 中最常见的渲染方式就是：BFC and IFC。

BFC的布局规则

  1. 默认，内部的块元素会在垂直方向，一个接一个地放置，每个块元素独占一行
  2. 块元素垂直方向的总距离由 margin 决定。属于同一个 BFC 的两个相邻块元素在垂直方向上的 margin 会发生重叠/合并。但水平方向的 margin 不会。
  3. 左侧 BFC 渲染区域的 margin，必须与右侧BFC渲染区域的 margin相衔接，不能出现重叠。
  4. BFC 渲染区域不会与 float浮动定义的元素区域重叠。
  5. BFC 就是页面上的一个隔离的独立渲染区域，独立渲染区域里面的子元素不会影响到外面的元素。反之外面的元素也不会影响到渲染区域里边的子元素。
  6. 计算父元素的 BFC 渲染区域的高度时，内部浮动元素的高度，都必须算在内。

如何创建一个 BFC

  1. float的值不是none。
  2. position的值不是static或者relative。
  3. display的值是inline-block、table-cell、flex、table-caption、inline-flex。
  4. overflow的值不是visible。

BFC 可以解决那些问题

  • 避免垂直方向的margin合并

    • 问题：垂直方向上的，两个元素margin相遇，两元素的间的距离并不等于两个margin之和。而是等于最大的margin。小的margin会被大的margin吞并。

      解决方法：

      1. 用一个外围块元素包裹下方元素
      2. 设置新外层元素 overflow:hidden 变成一个BFC方式的渲染区域。

      结果： 下方元素的margin-top受到新外层元素的BFC渲染区域的阻隔，不会影响外部上方元素的margin-bottom。同理，外部上方的margin-bottom因为在BFC渲染区域之外，所以，也无法影响其内部的margin-top。

  • 避免垂直方向的margin溢出

    • 问题：子元素设置 margin-top,会超出父元素的范围，变成父元素的 margin-top。而实际上子元素和父元素之间，依然没有margin-top的效果不是我们想要的。 解决方法：

      1. 设置新外层元素 overflow:hidden变成一个BFC方式的渲染区域。

      结果: 子元素的margin-top受到外层父元素BFC渲染区域的阻隔，不会影响父元素以外的区域。子元素的margin-top，才真正成为子元素与父元素上边的间距。

      其他方案： 1.为父元素添加上边框，颜色设置为透明。 2.用父元素的padding-top代替第一个子元素的margin-top。 3.在父元素内第一个子元素之前添加一个<table></table>，用平级BFC渲染区域阻隔下方元素的margin-top。 4. 父元素::before{content:"";display:table}，用平级BFC渲染区域阻隔下方元素的margin-top。

  • 自适应两栏布局
    • 左固定，右自适应
    .left{
    float:left;
    width:固定宽;
}
.right{
    overflow:hidden;
    ....
    // 变成BFC渲染区域，就不会与float:left的左侧元素发生重叠了
}
  • 防止高度塌陷。

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

某外企面试题，你真的了解BFC吗？

往期热门精彩推荐

面试相关热门推荐

实战开发相关推荐

移动端相关推荐

Git 相关推荐