本文介绍了BFC（Box Formatting context），它是页面上隔离的独立容器，内部子元素与外部互不影响。阐述了触发BFC的条件，如根元素、float不为none等。还说明了其应用场景，包括清除内部浮动、阻止Margin重叠、避免被浮动元素覆盖和实现自适应两栏布局等。
BFC 是什么？触发 BFC 的条件是什么？有哪些应用场景？
1.概念
BFC（Box Formatting context）：box 是 CSS 布局的对象和基本单位，BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此。
块级格式化上下文布局规则：
内部的 BOX 会在垂直方向一个接一个的放置；
属于同一个 BFC 的两个相邻 Box 的 margin 会重叠；不同 BFC 就不会；
是页面上一个隔离的独立容器，里面的元素不会影响到外面的元素；反之亦然；
BFC 的区域不会和 float box 重叠；
计算 BFC 的高度，浮动元素也参与计算；
2.触发条件
概括：
根元素
float 属性不为 none
position 为 absolute 或 fixed
overflow 不为 visible
display 为 inline-block，table-cell，table-caption，flex，inline-flex。
触发条件详细介绍：
1.根元素（<html>）
2.浮动元素（元素的 float 不是 none）
3.绝对定位元素（元素的 position 为 absolute 或 fixed）
4.行内块级元素（元素的 display 为 inline-block）
5.表格单元格（元素的display 为 table-cell，HTML表格单元格默认为该值）
6.表格表体（元素的 display 为 table-cation，HTML 表格标题默认为改制）
7.匿名表格单元格元素（元素的 display 为 table、table-row、table-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
8.overflow 值不为 visible 的块元素
9.display 值为 flow-root 的元素
10.contain 值为 layout、content 或 paint 的元素
11.弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
12.网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
13.多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
3.应用场景
1.清除内部的浮动，触发父元素的 BFC 属性，会包含 float 元素；
防止浮动导致父元素高度塌陷，父级设置 overflow：hidden，元素float:right;
2.分属于不同的 BFC ，可以阻止 Margin 重叠；
避免 margin 重叠，两个块相邻就会导致外边距被折叠，给中间的设置 BFC 就会避免，方法就是套个父级设置 overflow:hidden
3.阻止元素被浮动元素覆盖，各自是独立的渲染区域；
4.自适应两懒布局；
扫一扫
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
