关键词：
介绍下BFC及其应用
定义
BFC（Block Formatting Context）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-level box）块级盒子参与，BFC规定了内部盒子如何布局，以及盒子之间的关系和作用。
解释说明
Box(盒子)
Box盒子是CSS 布局的基本单位，在CSS中我们广泛的使用两种『盒子』——块级盒子和内联盒子。HTML元素的类型和display属性，决定了一个Box（盒子）的类型。不同类型的Box（盒子），会参与不同的Formatting Context（格式化上下文）。
Formatting Context(格式化上下文)
Formatting Context（格式化上下文） 是页面中的一块渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。
Block Formatting Context，块级格式化上下文，是Formatting Context（格式化上下文）的一种类型，只有（Block-level-box）块级盒子参与；相对应有Inline Formatting Context （IFC内联格式化上下文）。CSS3之后，还有GFC（Grid）和FFC（Flex）。
规则
- 内部的box会按照垂直方向叠放
- BFC是页面上一个被隔离的容器，BFC内部的子元素布局不会影响到外面的元素布局。
- 内部的box，垂直方向的距离由margin来控制。
- 内部相邻Box的margin会发生重叠。
- BFC的区域不会与float box重叠
- 计算BFC的高度时，浮动元素也参与计算
应用
- 清除浮动（让浮动元素的父级触发BFC）
- 阻止同一个BFC内box外边距合并
- 自适应两栏布局
- 阻止元素被（float）浮动元素覆盖
如何创建(触发)BFC
- 根元素
- 浮动元素
- 定位元素
- 行内块元素
- 表格单元格
- 表格标题
- overflow不为visible的块元素
- display值为flow-root的元素
- contain值为layout、content或paint元素
- 弹性元素flex布局元素的直接子元素
- 多列容器grid布局元素的直接子元素
- ...
总结
BFC块级格式化上下文，简单来说是一个封闭的区域，这区域里面的盒子不会影响区域外面的布局。BFC区域内的盒子需要遵守一些布局规则，比如：盒子会按照垂直方向排，盒子垂直方向的距离由margin控制，BFC 区域不与浮动框重叠，计算BFC的高度时，浮动元素也参与计算等。根据BFC的布局规则，BFC可以解决清除浮动，外边距合并等异常布局，也可以实现自适应两栏布局，阻止元素被浮动元素覆盖。创建(触发)BFC的条件有给元素添加overflow属性且值不为visible，float属性且值不为none，display属性值为：flow-root,inline-block,table-cell,table，table-row，flex，grid等。
参考链接
CSS of BFC
it邦——BFC
BFC in Css
https://www.programmersought.com/
前端面试css—bfc的渲染规则有哪些？有哪些应用场景？(代码片段)
1.BFC渲染规则1. BFC垂直方向边距重叠；2. BFC的区域不会与浮动元素的box重叠；3.BFC是一个独立的容器，外面的元素不会影响里面的元素；4. 计算BFC高度的时候浮动元素也会参与计算。2.BFC的应用场景1. 防止浮动导... 查看详情
前端面试题6道开胃菜css+js+vue(代码片段)
css区 一：BFC的相关：BFC的概念？了解：CSS2.1中只有 BFC 和 IFC, css3中还增加了 GFC 和 FFC。BFC定义：BFC（Blockformattingcontext）直译为“块级格式上下文”，它是一个独立渲染区域，只有BLOCK-LEV... 查看详情
前端面试css—什么是bfc？它的触发条件有哪些？
1.什么是BFC?BlockFromattingContext，即块级格式上下文。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（如inline-blocks,tablecells,和table-captions），以及overflow值不为"visiable"的块级盒子... 查看详情
前端面试css系列——div垂直水平居中
怎么让一个div垂直水平居中代码片段//HTML<divclass="parent"><divclass="child"></div></div>绝对定位.parent{position:relative;}//第一种.child{position:absolute;top:50%;left:50%;transform:translate(-50%, 查看详情
2019前端面试系列——css面试题(代码片段)
目录盒模型如何实现一个最大的正方形一行水平居中，多行居左水平垂直居中如何实现左右等高布局画三角形link@import导入cssBFC理解 回到顶部盒模型复制/*红色区域的大小是多少？200-20*2-20*2=120*/.boxwidth:200px;height:200px;padding:20p... 查看详情
学习过css，那你知道bfc是什么吗？(代码片段)
...名词，本文就来介绍一下到底什么是BFC公众号：前端印象不定时有送书活动，记得关注~关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】一起来理 查看详情
前端css必知：bfc及其触发条件(代码片段)
文章目录1.bfc的理解（块级格式化上下文）2.触发bfc的方式：3.bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4.bfc布局规则特性：5.两栏布局6.块元素高度不设或宽度不设的情况。将本... 查看详情
[轻松拿offer]web前端面试真题css系列---带详解！(代码片段)
临近秋招，不少小伙伴开始了求职之路，面试是十分重要的考验，其次也离不开面试题。网上的面试题零零散散，十分混乱，正好我抽时间帮助大家总结一下。难易程度肯定是从简到难，今天是第一篇的续... 查看详情
前端精选文摘：bfc神奇背后的原理
一、BFC是什么？ 在解释BFC是什么之前，需要先介绍Box、FormattingContext的概念。 Box:CSS布局的基本单位 Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了... 查看详情
web前端面试题
参考技术A第二章面试题基础篇2.1HTML面试题面试题：行内元素有哪些？块级元素有哪些？空(void)元素有那些？面试题：页面导入样式时，使用link和@import有什么区别？面试题：title与h1的区别、b与strong的区别、i与em的区别？面试题... 查看详情
resources&&learningproject
掘金前端查缺补漏掘金前端必读掘金前端100问面试官系列CSS面试官系列JS面试官系列ES6面试官系列React面试官系列网络手撕JS手撕算法手撕数据结构 查看详情
resources&&learningproject
掘金前端查缺补漏掘金前端必读掘金前端100问面试官系列CSS面试官系列JS面试官系列ES6面试官系列React面试官系列网络手撕JS手撕算法手撕数据结构 查看详情
前端面试题css(代码片段)
文章目录万能居中BFC优化盒模型哪两种模式？什么区别？如何设置常用清除浮动的方法，如不清除浮动会怎样？删格化的原理纯css实现三角形高度不定，宽100%，内一p高不确定，如何实现垂直居中？至少两种方式实现自适应搜索... 查看详情
前端精选文摘：bfc神奇背后的原理------转
BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但当别人问我BFC是什么，我还是不能很有底气地解释... 查看详情
新手小白必知的5道web前端经典面试题
想成功就业web前端工程师，想要能高薪就业，那么除了好的web前端技能以外，还得有好的面试技巧，如果提前就了解更多企业的面试要求及面试题目，那么可以让我们的面试成功的几率大大的提高，今天就给大家分享5道经典的we... 查看详情
html5前端面试常见问题汇总
基础强化篇聊一聊前端存储。 BFC 前端工程化篇场景：你是第一天来公司上班的，项目代码托管在GitLab，项目地址：[email protected]:org/project.git,现在有一处代码需要你修改。请下完成此项任务中，与git/gitlab相关的... 查看详情
前端css面试题2023前端最新版css模块，高频15问(代码片段)
🥳博 主：初映CY的前说(前端领域)🌞个人信条：想要变成得到，中间还有做到！🤘本文核心：博主收集的CSS面试题目录一、CSS必备面试题1.CSS3新特性2.CSS实现元素两个盒子垂直水平居中方... 查看详情
前端基础面试题之语义化+块级元素和内联元素+css布局盒模型(代码片段)
HTML语义化块状元素和内联元素CSS盒模型BFC理解与应用对于BFC\\color#FF0000BFCBFC的布局方式，会在下一篇博客中详细进行介绍，这个知识点在CSS布局中还是很重要的。https://blog.csdn.net/u012396955/article/details/111315837圣杯布局和双... 查看详情