面试官问:什么是BFC?
首先直接翻译一下BFC,BFC全称(Block Formatting Contexts),中文意思为:块级格式化上下文。
通俗一点来讲,可以把BFC理解为一个封闭的大盒子,盒子内部的元素无论怎么样,是跑,是跳、还是飞,都不影响到外部。个人理解
1、BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响;
2、可以通过一些条件触发BFC,从而实现布局上的需求或解决一些问题;
3、可以将BFC想象成一个工具,无需探究其定义,只要着重理解其功能(特性)即可。
BFC的触发条件
然后随便说二三种会触发BFC特性的情况,比如:
body根元素 (<html>)
浮动元素:float除none以外的值
绝对定位元素:position(absolute、fixed)
display为inline-block、table-cells、table-caption、flex、inline-flex
overflow除了visible以外的值(hidden、auto、scroll)
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠(重点)
2、计算BFC高度时浮动元素也参于计算(重点)
3、BFC的区域不会与浮动容器发生重叠(重点)
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器,容器内部元素不会影响容器外部元素
BFC的应用
根据情况,此处略。。。。。。
BFC功能总结
1、可以利用BFC解决两个相邻元素的上下margin重叠问题;
2、可以利用BFC解决高度塌陷问题;
3、可以利用BFC实现多栏布局(两栏、三栏、圣杯、双飞翼等)。