# 格式化上下文:
它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。
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>
② 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 / ……; /* 表格相关 */
}
③ overflow
body {
/* 除了visible、clip */
overflow: hidden;
overflow: scroll;
}
- 浮动元素(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>
<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>
🚩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>
- 双栏布局
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20221202005548.png)
BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素
# 二、IFC 是什么?
通常情况下,还是建议少用 inline-block
进行布局。
规则 1
在行盒与行盒之间,相邻元素建存在空白字符,则会出现空白折叠。
<!-- 示例1 -->
<div>
<span>任</span>
<span>先生</span>
</div>
<!-- 示例2 -->
<div><span>任</span><span>先生</span></div>
但是在实际项目开发中,通过打包压缩后,元素间是不存在空白字符的。
所以,如果我随意所以inline-block
进行布局的话,会造成开发环境和生产环境的效果不一致了。
规则 2
行盒与行盒之间的排列默认是水平基线对齐的
<div>
<span>水平基线对齐</span>
<img src="https://picsum.photos/100/100" alt="" />
</div>
规则 3
行盒元素会绕开浮动元素环绕排列
<div>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
<span>任</span>
<span>先生</span>
</div>
← CSS元素类型 【Bootstrap3】 →