面试之BFC

面试官问:什么是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实现多栏布局(两栏、三栏、圣杯、双飞翼等)。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容