本文介绍了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.行内块级元素（元素的 disp
最低0.47元/天 解锁文章
扫一扫
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
