BFC(BlockFormattingContext)的特点是元素拥有独立的渲染区域,元素内部的内容(边距,浮动元素等)不会影响到外部元素。

引言在前端面试中，BFC是一个很经常问到的概念。今天我们就来一起了解下什么是BFC，以及它的主要作用。

重点面试题目1.BFC的形成条件简称块级格式化上下文。如何形成的bfc？

2.父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。但是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检

BFC全称BlockFormattingContext。

css中的float（浮动）：在css中浮动的作用可让元素脱离文档流，从而达到某种布局效果float：left，可以让元素向左浮动，元素会浮动到父元素的左边缘，由于脱离了文档流，所以处于正常文档流内的元素会后来居上，相应的浮动元素会盖在位于它之后，且和它处于同一父元素内的元素上面。//float1.container{border:3pxsolidblue;padding:10px;}.elem-

解决高度塌陷的方法有以下几种：根据W3C的标准，在页面中元素都一个隐含的属性叫做BlockFormattingContext（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的当

[](http://upload-images.jianshu.io/upload_images/905505-5eb8a1fa6e318bfc.jpg?

在页面元素中有一个隐藏属性叫做BFC该属性的特点是：1.父元素不会和子元素重叠2.开启的BFC元素不会被浮动所覆盖3.开启BFC的元素可以包含

BFC定义BFC(Blockformattingcontext)直译为"块级格式化上下文"。

[css]CSS3新增伪类有哪些并简要描述[css]用css创建一个三角形，并简述原理[css]简述你对BFC规范的理解[css]

1.前言上图是本文整理的与BFC有关的思维导图。下面将逐个介绍上图中出现的所有概念。

1.前言上图是本文整理的与BFC有关的思维导图。下面将逐个介绍上图中出现的所有概念。

块级格式化上下文定义：①BlockFormattingContext简称BFC②块级元素参与构建的、遵循一定规则的独立环境BFC形成条件根元素float属性不为none;p

overflow:hidden作用机制BFC：BFC（BlockFormattingContext）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了

盒模型的宽度如何计算、margin纵向重叠的问题margin负值得问题、BFC理解和应用***float布局的问题，以及清除浮动clearfix、float画筛子absolute和relative分别依据什么定位

【一面】1.首先：自我介绍＋项目2.instanceOf实现的原理3.typeof4.js的类型5.给了一段setTimeout、Promise判断输出顺序6.事件循环7.BFC8.position的属性

把一些有意思的题目分享和总结一下我们先来看一下这几个题目：题目一：总结一下css中常用的选择器题目二：分析并说明href和src两种引用方式的区别题目三：比较并说明IE盒子模型和W3C标准盒子模型的区别题目四：简述你对BFC

基本对象类型以及引用对象类型的区别轮播的实现，空白图片怎么解决面向对象的继承方式数据交互的方法水平垂直居中单例模式domvue的组件化开发Vue的响应式原理无序列表内容CSS画三角形同步与异步问题前端中的事件流函数中的thispromiseBFC

CSS浮动与清除浮动(重点)文章目录CSS浮动与清除浮动(重点)标准文档流浮动清除浮动浮动的破坏性固定高度法内墙法（了解）伪元素清除法（常用）overflow属性（常用）BFC区域（了解）标准文档流首先了解一下什么是标准文档流标准文档流

什么是BFC？再解释之前需要了解下面的一些概念有一个认识：Box(框)Box它是组成页面的基本单元，一个界面可以由多个Box元素组成。

html&css部分BFC和IFCFC是页面中的一块渲染区域，并且有一套渲染规则，他决定了子元素如何定位，以及和其他元素的关系和相互作用。

上周五去BFC的潮民公馆和VIP群聚餐，这次聚餐的人有好几个是以前没有见过的，有的连Jeannie也是

目录1.iframe框架都有哪些优缺点优点：缺点：2.简述你对BFC规范的理解介绍：形成条件（任意一条）特性应用场景3.统计某一字符或字符串在另一个字符串中出现的次数方法一：方法二：4.简述下html5

BFCBlockfomattingcontext(简称BFC)Inlineformattingcontext(简称IFC)CSS2.1中只有BFC和IFC,CSS3中还增加了GFC和FFCBFC定义：BFC

一、元素类型元素分类置换和非置换元素元素类型转换二、css精灵三、宽高自适应宽度自适应高度自适应最小高度自适应高度塌陷及解决办法元素的高度自适应屏幕的高度四、BEC概念应用常见定位方案触发BFCBFC特性及应用

前端知识点总结一、css布局浮动清除浮动定位flex布局表格布局网格布局JS布局二、css盒子模型弹性盒子模型标准盒模型ie盒模型标准盒模型VSie盒模型转换三、BFC规则创建四、js获取宽高forin

前端冲刺1.1Cookie，闭包，BFC，盒模型CookieCookie基本知识：定义：Cookie是一些数据，当web服务器向浏览器发送web页面时，在连接关闭后，服务端不比记录用户的信息Cookie

2021/1/251.谈谈对BFC的理解三种定位方式：普通文档流：在普通流中，元素按照其在HTML中的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行

01浮动02高度塌陷03position04弹性盒子正文：01浮动02高度塌陷.box1{width:200px;height:200px;background-color:red;/*这里给父元素开启BFC

为什么会有BFC?理论来讲：被包含在父元素里的元素是不会影响到父元素旁边的元素，事实并非如此。我们想要隔离开，可以触发BFC（BlockFormatingContext块级格式化上下文）BFC是什么?

解决方案：1.设置父元素上边框（实际开发不提倡）2.让父级元素触发bfc：bcf触发条件：position：absolute；display:inline-block;float:left/right;

文章目录一、HTML篇语义化标签二、CSS篇50道基础题常见布局居中问题BFCBEMCSS预处理器常见单位三、JavaScript篇数据类型原型链继承闭包newthisVO和AO词法作用域深拷贝和浅拷贝事件冒泡

2.盒子模型有哪两种3.标准和怪异模型的转换4.JS盒模型二、BFC概念如何触发BFC？BFC的应用三、清除浮动为什么要清除浮动？1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签。

css实现图片自适应宽高讲flex，手写出flex常用的属性，并且讲出作用BFC是什么项目里面的前端鉴权是怎么实现的？vue里面的虚拟dom是怎么回事？

什么是BFC首先呢，BFC的全称是BlockFormattingContext，BFC其实就是页面上的一块区域，有它自己的渲染规则，决定了其内部子元素的定位等等。

5.BFC和IFC模型。一、垃圾回收与内存泄漏参考：内存控制1.垃圾回收v8的垃圾回收策略主要基于分代式垃圾回收机制。

粘贴到淘宝即可）选用优质棉质卫衣布经水洗和预缩工艺面料舒适，厚度适中美式oversize宽松版型小领口加厚螺纹秋冬外搭内穿都很适合店铺Battles线上商店COCCUBE西装门襟拼接羽绒服1599淘宝口令7UlBFctM4p8X

c...这是公用样式.outer{width:150px;height:200px;background:pink;border:1pxsolidpink;}.inner{background:#77BFCD

3.从输入url到获得页面经历的所有事情(越细越好)4.原型、原型链5.继承6.ES6新特性7.DOM事件和事件流8.阻止事件冒泡和移除事件绑定9.事件循环10.BFC11.Flex常见属性12.定时器的执行顺序或机制

定义BFC(Blockformattingcontext)直译为"块级格式化上下文"，可以理解为一个独立的区域，不受外界干扰分解BFC=Box+FormattingcontextBox是CSS布局的基本单位

hadoop版本为hadoopversionHadoop2.10.1Subversionhttps://github.com/apache/hadoop-r1827467c9a56f133025f28557bfc2c562d78e816Compiledbycentoson2020

事件委托this指向，call/apply/bind，回调函数数组的常用操作set和weakset，map和weakmaptypeof原理0.1+0.2===0.3吗，为什么前端安全xss和csrf说明BFC

文章目录Web前端面试题大全（一）HTMLCSS篇1：如何实现盒子水平垂直居中2：图片下方间空白隙如何解决3：简述圣杯布局、双飞翼布局实现的原理4：简述精灵图原理以及其优缺点5：简述BFC规则以及解决的问题

seata参考博客：https://www.pianshen.com/article/84721946457/https://www.jianshu.com/p/dec4550efbfc参考视频：https

DNS查询出现的问题在tutor-neo-question项目接入到soho-k8s后，在tutor-neo-question-86ccc7bfcc-g59kf/tutor-neo-question-569b6d9fb9

hadoop版本为hadoopversionHadoop2.10.1Subversionhttps://github.com/apache/hadoop-r1827467c9a56f133025f28557bfc2c562d78e816Compiledbycentoson2020

container{width:100px;height:100px;background:#888;position:fixed;top:100px;left:100px;}当父级元素设置transform之后.BFC-box

高度坍塌的根源是：常规流盒子的自动高度在计算时，不会考虑浮动盒子清除浮动给父元素一个固定的高度（不建议使用，不够灵活）子元素浮动的时候，会在其内部创建一个新的bfc，此时，父元素的处于html这个根元素的渲染区域

1.高度塌陷(1)高度塌陷的条件1)子元素浮动2)父元素没有设置高度(2)解决办法1）给父元素添加overflow:hidden;(触发BFC)弊端：会把父元素之外的元素给隐藏掉2）给浮动元素的后面添加一个块级元素