BFC

# FC 概念

FC 是Formatting Context的简写，元素在标准流中都是属于一个 FC 的；块级元素的布局属于Block Formatting Context,简称BFC,也就是所有的 Block Level Box 都是在BFC中布局的；行内级元素属于Inline Formatting Context，简称IFC,即所有的 Inline Level Box 都是在IFC中布局的

# 会创建 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 或者 inlien-grid 的元素的直接子元素)
display 的值为 flow-root 的元素

# BFC 的概况

在 BFC 中，box 会在垂直方向上一个挨着一个的排布
垂直方向的间距由 margin 属性决定
在同一个 BFC 中，相邻的两个 box 之间的 margin 会折叠
在 BFC 中每个元素的左边缘是紧挨着包含块的左边缘的

# BFC 具体作用一解决 margin 的折叠问题

在同一个 BFC 中相邻的两个 box 之间的 margin 会折叠如果需要让在同一个 BFC 中的两个盒子之间的 margin 不折叠，需要让这两个盒子不在同个 BFC 中

# BFC 具体作用二解决浮动高度塌陷

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

浮动元素的父元素触发 BFC，形成独立的块级上下文
浮动元素的父元素的高度是 auto

# BFC 高度是 auto 的情况下是如何计算高度的

如果只有 inline-level 元素，是行高的顶部和底部的距离
如果有 block-level，是由最顶层的块上边缘和最底层块盒子的下边缘的距离
如果有绝对定位元素，将被忽略
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

.container {
  background-color: #ff0;
  overflow: auto;/* 将盒子转换为新的BFC，同样解决了浮动高度塌陷的问题 */
}
.box{
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 1px solid #000;
  float: left;
  background-color: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3
4
5
6
7
8
9

// Make sure to add code blocks to your code group

#BFC

上次更新: 2022/08/03, 08:35:34

← CSS书写顺序浏览器的渲染原理→

BFC