面试官:谈谈你对BFC的理解?
Opened this issue · 0 comments
linwu-hi commented
面试官:谈谈你对BFC的理解?
一、是什么
在页面布局的过程中,我们经常会遇到一些奇怪的情况,比如元素的高度消失了、两栏布局无法自适应、元素间距出现异常等等。这些问题往往是由于元素之间相互影响而导致的。在这里,就涉及到了BFC(Block Formatting Context)的概念。
BFC(块级格式化上下文)是页面中一块独立的渲染区域,具有一套独立的渲染规则:
- 内部的盒子会在垂直方向上一个接一个地放置。
- 同一个BFC的相邻盒子的margin会发生重叠,与方向无关。
- 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此。
- BFC的区域不会与float的元素区域重叠。
- 计算BFC的高度时,浮动子元素也参与计算。
- BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
BFC的目的是形成一个相对于外界完全独立的空间,使内部的子元素不会影响到外部的元素。
二、触发条件
触发BFC的条件包含但不限于:
- 根元素,即HTML元素
- 浮动元素:float值为left、right
- overflow值不为visible,为auto、scroll、hidden
- display的值为inline-block、inline-table、table-cell、table-caption、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
三、应用场景
利用BFC的特性,我们可以在以下场景中应用BFC:
1. 防止margin重叠(塌陷)
<style>
.container {
overflow: hidden; /* 触发BFC */
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<div class="container">
<p>Haha</p>
</div>
<p>Hehe</p>
</body>
在没有触发BFC的情况下,两个p元素之间的距离为100px,发生了margin重叠(塌陷)。通过给包含p元素的容器触发BFC,两个p元素不再属于同一个BFC,从而避免了margin重叠。
2. 清除内部浮动
<style>
.parent {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
通过触发parent元素生成BFC,可以清除内部浮动的影响,从而使parent元素具有高度。
.parent {
overflow: hidden; /* 触发BFC */
}
3. 自适应多栏布局
<style>
.wrapper {
width: 300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="wrapper">
<div class="aside"></div>
<div class="main"></div>
</div>
</body>
在不触发BFC的情况下,.main元素的左边会与.wrapper元素的左边界相接触,从而无法实现两栏布局。
通过触发.main元素生成BFC,.main元素的左边不再与.wrapper元素的左边界相接触,从而实现自适应多栏布局。
.main {
overflow: hidden; /* 触发BFC */
}
小结
通过上面的例子,我们可以看到BFC的实际效果就是形成一个页面中的独立容器,里面的子元素不影响外部的元素,反之亦然。BFC为我们解决了很多布局上的问题,提供了更灵活和可靠的布局手段。