前端BFC布局面试题库（含详细答案）.docxVIP

前端BFC布局面试题库（含详细答案）

前置说明：所有题目均为一线互联网公司面试原题衍生，难度由浅入深，覆盖概念、触发条件、应用场景、错题解析、手写代码实操五大模块

一、选择题（基础必考）

单选题1：以下关于BFC的描述，说法正确的是？（）

A.BFC是一种全新的CSS布局模式，专门用于弹性布局

B.BFC本质是独立的渲染区域，内部元素不会影响外部布局，外部也不会干扰内部

C.开启BFC之后，元素再也不会发生外边距合并问题

D.浮动元素无法触发BFC

答案：B

解析：

A错误：BFC不是新型布局模式，是块级格式化上下文，属于普通文档流的渲染规则；弹性布局对应的是FFC

C错误：BFC只能解决相邻父子元素的外边距塌陷，同级元素之间的外边距合并依旧存在

D错误：设置浮动且值不为none，本身就是触发BFC的常用条件之一

单选题2：下列CSS属性写法中，不能触发元素BFC的是？（）

A.overflow:hidden;

B.display:inline-block;

C.overflow:visible;

D.float:left;

答案：C

解析：overflow默认值就是visible，该状态下元素属于普通文档流，无法生成BFC；其余三个选项均为日常开发最常用的BFC触发方式。

二、简答题（面试高频口述题）

简答题1：请你用直白的话解释一下什么是BFC？

参考