BFC定义
BFC 的全称是 Block Formatting Context,块级格式化上下文。是用于布局块级盒子的独立渲染区域,且这个区域与外部不相关.
将处于BFC区域内和区域外的元素进行互相隔离。
简单的来说:BFC就是css的一个布局概念,是一个独立的区域(容器)
文档流分类
文档流分为:浮动流、定位流、普通的标准流,而普通标准流其实就是BFC中的FC.
FC:formatting context的英文缩写,翻译过来就是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及与元素之间的关系和作用。
常见的FC:BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。
触发BFC的条件
满足下列条件之一就可以触发BFC
-
根元素,即html元素;
-
position 值为
absolute
或fixed
-
float 值不为
none
-
overflow 值不为
visible
-
display的值为
inline-block
、flex
、table-cell
BFC的应用场景
1.场景一:防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)
属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠,如果想让它们不重叠,可通过让这两个相邻块级子元素分属于不同的BFC。
以下示例代码中的两个盒子的上下外边距会重合(即它们都设置了10px的外边距,我们期望它们之间的间距是 20px,但实际效果却只有 10px):
<style>
.box1 {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 10px; /* 下外边距为 10px */
}
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px; /* 上外边距为 10px */
}
</style>
<div class="box1"></div>
<div class="box2"></div>
下面我们让其中一个盒子触发BFC,从而达到间隔 20px 的期望效果:
.box2 {
width: 200px;
height: 100px;
background-color: green;
margin-top: 10px;
display: inline-block; /* 通过设置 display 为 inline-block 可以触发 BFC */
}
2.场景二:清除浮动
以下示例代码中, 容器元素 box1 没有设置高度:
<style>
.box1 {
width: 200px;
border: solid 2px pink;
background-color: red;
}
.box2 {
float: left;
background-color: green;
}
</style>
<div class="box1">
<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
</div>
而通过为 box1 添加 BFC 触发条件,可以让它的高度变回正常状态:
.box1 {
width: 200px;
background-color: red;
overflow: hidden;
}
3.场景三:实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)
以下示例中,box2 会被设置了浮动的 box1 覆盖:
<style>
.box1 {
float: left;
width: 300px;
background-color: red;
height: 400px;
}
.box2 {
background-color: blue;
height: 600px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
要避免这种覆盖行为,可以让 box2 触发 BFC, 实现布局效果, 左边固定右边自适应:
.box2 {
background-color: blue;
height: 600px;
overflow: hidden; /* 将 overflow 设置为非 visible 值可触发 BFC */
}