大家好！我是一个职场小菜鸟~
我尽量坚持每天更新一道面试题，监督自己也分享知识！
今天是2月份的第一天！坚持就是胜利！
先来一波碎碎念
大家可以关注我的公众号，掘金可能不会每天更新，如果某天工作太忙了，就只更新公众号啦！
好啦来看看 2月份的第一道题目吧
题目来咯
说说 BFC 如何触发 有什么应用场景？
康康思路
一般这样的题目面试官考察的是我们对css的基础的理解，看看我们在开发过程中对布局的思考，对css的设计等一些基本功的操作。
今天的问题主要就是释义，直接看答案吧！
康康答案
图片什么是BFC？
-
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
-
块格式化上下文包含创建它的元素内部的所有内容
-
块格式化上下文对浮动定位与清除浮动都很重要。
-
浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
图片那么什么情况会触发BFC呢？ 满足下列条件之一就可触发BFC
-
根元素，即HTML
-
float的值不为none（both,left,right）
-
overflow的值不为visible（hidden,auto,scroll）
-
display的值为inline-block、table-cell、table-caption
-
position的值为absolute或fixed
图片那么BFC的布局规则是什么呢？
-
内部的Box会在垂直方向，顺序放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
-
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
-
和float元素区域分割开，BFC的区域不会与float区域重叠。
-
是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算
图片那么BFC有什么作用呢？或者说应用场景
-
清除浮动
-
消除margin重叠
-
布局
下面举一个例子来看看【清除浮动】的具体场景吧
// 清除浮动
<div class="container-box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
.container-box {
position: fixed; /*为了创建BFC环境*/
background: #ccc;
}
div {
height: 30px;
}
.box1 {
width: 300px;
background: pink;
}
.box2 {
width: 250px;
background: green;
}
.box3 {
width: 200px;
background: red;
float: left;
}
.box4 {
width: 150px;
height: 40px;
background: blue;
}
我们肯定能看到结果是：
-
div均为垂直方向
-
浮动-box3也是垂直方向，且没超过前两个div元素
-
虽然box3超过前两个元素，但是box4位置顶上去了，占了box3的位置，所以看起来box4高变小了
-
所有子div都是左对齐
剩下的两项大家可以自己试一下，可以把答案反馈给我哟！期待大家的反馈！（也算今天的一个小任务吧！）
关注我的公众号- 点点web ，每天坚持进步！
