# 格式化上下文:
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。
Formatting context
是 W3C CSS2.1 (opens new window) 规范中的一个概念。
最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context(简称 IFC ) 。
提示
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 G(grid)FC 和 F(flex)FC。
# 一、BFC 是什么?
BFC(block formatting context),即块状格式化上下文,一个 BFC 区域包含创建该上下文元素的所有子元素,但不包括其他 BFC 区域的子元素。
BFC 是一块块独立的渲染区域,其内部的元素不会影响到外部的其他元素,外部元素也不能影响到 BFC 内部的元素。
总结
BFC 理解简述:
BFC 是一个独立的布局环境,其内部的元素与外界互不影响(概念性的东西)
# 1、BFC 的触发条件
创建块格式化上下文的方式,简要的整理如下(完整版的可以查看 MDN (opens new window)):
① 根元素
<html> <!-- html页面其实就是一个大的BFC容器 --> </html>
Copied!
② float、position、display
body { /* 1、float */ /* 除了none(即:只要设置了) */ float: left / right; float: inline-start / inline-end; /* 2、position */ position: absolute; position: fixed; /* 3、display */ display: inline-block; /* 行内块 */ display: flow-root; /* new一个BFC🤔 */ display: flex / inline-flex; /* 弹性元素 */ display: grid / inline-grid; /* 网格元素 */ display: table-cell / table-caption / ……; /* 表格相关 */ }
Copied!
③ overflow
body { /* 除了visible、clip */ overflow: hidden; overflow: scroll; }
Copied!
- 浮动元素(float 值不为 none)
- 绝对定位元素(position 值为 absolute 或 fixed)
# 2、BFC 的布局规则
内部的块会在垂直方向上一个接一个的放置
🚩 垂直方向上的距离由 margin 决定(属于同一个 BFC 的两个相邻子 Box 的 margin 会 👀 发生重叠 —— margin 塌陷 )
<style> p { height: 100px; width: 200px; background-color: aliceblue; margin: 50px; } .solve { overflow: hidden; /* 解决塌陷问题① */ } </style> <body> <!-- 新建一个BFC环境 --> <div class="solve"><p>上面的盒子</p></div> <p>下面的盒子</p> </body>
Copied!
<style> ul { display: inline-block; /* 解决塌陷问题② */ margin: 10px; background: lightblue; } </style> <body> <div></div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body>
Copied!
🚩BFC 块状元素 和 浮动元素 挨着显示而不会重叠(清除浮动)
BFC 块状元素的 margin-left 和 其包含块的 border-left 紧贴
计算 BFC 的高度时,浮动元素也会参与计算
<style> .par { border: 5px solid #fcc; width: 300px; /* height: 100px; 没有设置高度,子盒子float无法撑大父盒子 */ overflow: hidden; /* 清除浮动 */ } .child { border: 5px solid #f66; width: 100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body>
Copied!
- 双栏布局

BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素
# 二、IFC 是什么?
通常情况下,还是建议少用 inline-block
进行布局。
规则 1
在行盒与行盒之间,相邻元素建存在空白字符,则会出现空白折叠。
<!-- 示例1 --> <div> <span>任</span> <span>先生</span> </div> <!-- 示例2 --> <div><span>任</span><span>先生</span></div>
Copied!
但是在实际项目开发中,通过打包压缩后,元素间是不存在空白字符的。
所以,如果我随意所以inline-block
进行布局的话,会造成开发环境和生产环境的效果不一致了。
规则 2
行盒与行盒之间的排列默认是水平基线对齐的
<div> <span>水平基线对齐</span> <img src="https://picsum.photos/100/100" alt="" /> </div>
Copied!
规则 3
行盒元素会绕开浮动元素环绕排列
<div> <div> <div class="left"></div> <div class="right"></div> </div> <span>任</span> <span>先生</span> </div>
Copied!
← CSS元素类型 【Bootstrap3】 →