BFC是什么？BFC可以做什么？

BFC是什么

一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域

二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

BFC触发条件

BFC是一个css渲染特殊的一部分，需要一定的条件才能触发

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
弹性盒子（元素具有 display:flex）
具有overflow 且值不是 visible 的块元素

BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

BFC可以解决的问题

垂直外边距重叠问题
去除浮动
自适用两列布局

两列布局

自适应的双列布局利用浮动、外边和触发父级BFC即可实现，这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度，父盒子会被撑开。
现在给类名为"container"的父盒子添加"overflow: hidden"属性，使该父盒子成为BFC。

参考文章：

面试官：请说说什么是BFC？大白话讲清楚_小小蛙人的博客-CSDN博客

什么是BFC？BFC可以解决什么问题_浪人巷子7的博客-CSDN博客_bfc

BFC是什么？BFC可以做什么？相关推荐

什么是BFC？聊聊BFC及其应用
什么是BFC?聊聊BFC及其应用什么是BFC? 怎样能创建BFC?BFC在哪里? BFC的应用解决margin重叠问题解决高度塌陷的问题什么是BFC?这个在刚接触前端时候一直困扰自己的东西,知 ...
CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
day06 布局核心: 盒模型(间距) 浮动 (并排) 定位 (覆盖+ 特殊位置) 定位类型position 静态定位 position:static; 默认值静态定位不能使盒子位置变化不适合布局 ...
CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
CSS中块级格式化上下文（BFC）的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
一天搞定CSS：BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用关键词解释: 块级元素:父级( ...
BFC与IFC概念理解+布局规则+形成方法+用处
想要理解BFC与IFC,首先要理解另外两个概念:Box 和 FC(即 formatting context). Box 一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 ...
浅谈对BFC的认识，以及用bfc解决浮动问题
我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Fo ...
bfc和haslayout
1 BFC是什么 Block Formatting Context (块格式化上下文)是W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为flow root.格式化则表明了在这个环境中,元 ...