CSS-BFC详解（再也不怕面试了）

Rsquo
221 阅读3分钟

1. FC-Formatting Context

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的。

image.png

  • 块级元素的布局属于 Block Formatting Context（BFC），也就是block level box都是在BFC中布局的

  • 行内级元素的布局属于 Inline Formatting Context（IFC），而inline level box都是在IFC中布局的

2. BFC官方文档解读

  • 官方文档的描述

    image.png

  • 简单概括如下：

    • 在BFC中，box会在垂直方向上一个挨着一个的排布

    • 垂直方向的间距由margin属性决定

    • 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

    • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的

  • 在哪些具体的情况下会创建BFC：

    • 根元素（<html>）

    • 浮动元素（元素的 float 不是 none）

    • 绝对定位元素（元素的 position 为 absolute 或 fixed）

    • 行内块元素（元素的 display 为 inline-block）

    • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

    • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）

    • overflow 计算值(Computed)不为 visible 的块元素

    • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）

    • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

    • display 值为 flow-root 的元素

3. BFC的应用

3.1 消除折叠效果

  • 官方描述

    The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

  • 给某一个元素放到另外一个BFC中 消除折叠.png

    <style>
.container {
  /* 形成BFC */
  overflow: auto;
}

.box1 {
  height: 200px;
  width: 400px;
  background-color: orange;

  margin-bottom: 30px;
}

.box2 {
  height: 150px;
  background-color: purple;

  margin-top: 50px;
}

</style>

<div class="container">
    <div class="box1"></div>
</div>
<div class="box2"></div>

3.2 浮动高度塌陷

注意：BFC不能解决绝对定位元素的高度塌陷问题

  • BFC解决高度塌陷需要满足两个条件：

    • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）

    • 浮动元素的父元素的高度是auto的

    <style>
.container {
  background-color: orange;

  /* 形成BFC */
  overflow: auto;
}

.item {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 1px solid #000;
  float: left;
  background-color: #f00;
}
</style>

<div class="container clear_fix">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    解决浮动高度塌陷.png

  • BFC的高度是auto的情况下，计算高度的方法如下：

    1. 如果只有inline-level，是行高的顶部和底部的距离

    2. 如果有block-level，是最底层的块上边缘和最底层块盒子的下边缘之间的距离

    3. 如果有绝对定位元素，将被忽略 （所以解决不了绝对定位元素高度塌陷的问题）

    4. 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

4. 说说你对BFC的理解（面试题）

  • block format context(块级格式化上下文)
    • 是页面的一块渲染区域 并且有一套渲染规则,决定了子元素如何定位以及与其他元素之间的排列布局之间的关系
    • BFC是一个独立的布局环境 相当于是一个容器 在其中按照一定的规则对块级元素进行摆放,并且不会影响其他的布局环境中的盒子,如果一个元素触发BFC则BFC中的元素布局不受外界的影响
  • 块级元素在标准流中的布局是属于BFC的
  • 创建BFC的条件:
    • 根元素: body/:root
    • float left/right
    • position absolute/fixed
    • overflow: 除visible
    • display: inline-block/table-cell/table-caption ,flex/grid...
  • 特点
    • 垂直方向 自上而下排布
    • 垂直方向的间距由margin决定
    • 同一个BFC中 盒子之间的margin会折叠
    • BFC中 每个元素的左边缘紧挨着包含快的左边缘
    • 计算 BFC 的高度时，需要计算浮动元素的高度
    • BFC内部不会影响外部元素
    • BFC区域不会与浮动的元素发生重叠
avatar
文章
阅读
粉丝