BFC是什么？

块格式化上下文（Block/box Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
Box是css布局的基本单位（直观点说：一个页面丝还由多个盒子组成的）
Formatting Context是W3C CSS2.1中的一个规范，他是页面中的一块渲染区域并且有自己的渲染规则，他决定了子元素如何定位及浮动等问题。
 

I know it when I see it

所以，虽然我不知道什么是BFC，但是写出样式，我就能知道这是不是BFC

BFC就是这样的东西

  • 它没有定义
  • 它只有特性/功能

BFC特性/功能

    • 使用BFC 包住浮动元素
    • 和浮动元素产生边界

如何回答面试官呢

接下来，我们继续看官方文档，满足其中之一的都是建立了一个BFC

下列方式会创建块格式化上下文：

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display 为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。 块格式化上下文包含创建它的元素内部的所有内容.

如何创建BFC?

读完MDN后，我们知道，满足其一，就是建立了一个BFC

  • float的值不是none
  • position的值是absolute、fixed
  • display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
  • overflow的值不是visible

接下来，让我们看几个例子吧，使我们加深对其功能的理解

功能1 用BFC包住浮动元素

子元素浮动，脱离了普通文档流，父元素包不住子元素

没有产生BFC

这个时候如果想父元素包裹住子元素，该怎么办呢？

让父元素产生一个BFC

解决办法一：让父元素浮动 浮动产生BFC

解决办法二：让父元素绝对定位

绝对定位产生BFC

解决办法三：让父元素变成行内块元素

display:inline-block产生BFC

解决办法四：让父元素的overflow设置为hidden

overflow:hidden产生BFC

解决办法五：让父元素的display设置为flow-root(触发BFC,无副作用)

display:flow-root产生BFC

注意：如果父元素产生了BFC，会把浮动的子元素包住，但是如果子元素里面还有浮动的子元素(也就是浮动的孙子)，这时，父元素是不会包住孙子元素的

功能二 和浮动元素产生边界

兄弟元素之间，其中左边元素浮动，让其划清界限

没有产生BFC

用 float+div 做左右自适应布局

解决办法一：浮动元素的margin-right没有生效，这个例子中，如果没有BFC，我们想要产生边距，需要将普通元素的margin-left设置为浮动元素宽度+想要产生的边距宽度

没有产生BFC

解决办法二：让右侧兄弟元素的display设置为flow-root

display:flow-root产生BFC

解决办法三：让右侧兄弟的display设置为flex

dispaly:flex产生BFC

解决办法四：让右侧兄弟元素的overflow设置为hidden

overflow:hidden产生BFC

总结

BFC就是页面上一个单独的容器，容器内部的元素不会影响到外面的元素

不明白BFC的概念，但是我们看到后，就知道这是BFC

所以，面试时不要去讲解BFC的定义！

那么，面试时如何说明BFC呢？举例子！！

神奇的BFC的更多相关文章

  1. 神奇的BFC以及被忽略的东西

    BFC是CSS中一个非常重要的概念,经常用来清除浮动以及处理外边距折叠,但BFC到底是个什么东西却很难准确的表达清楚,国内的相关技术文档基本都不全面,本文的目的就是对BFC的方方面面做个整理,当然未必 ...

  2. 前端里神奇的BFC 原理剖析

    以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 B ...

  3. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  4. BFC 神奇背后的原理

    BFC已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发BFC, 以及BFC的一些用处(如清浮动,防止margin重叠等).虽然我知道如何利用BFC解决这些问题,但当别人问我BFC ...

  5. 神奇的盒模型（BFC）

    上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...

  6. 【转】前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  7. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 前端精选文摘：css之BFC 神奇背后的原理（转载）

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  9. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

随机推荐

  1. IDM下载器：站点抓取相关设置介绍

    Internet Download Manager(简称IDM)是一款十分好用资源下载器,它的站点抓取功能不仅可以下载被过滤器指定所需文件,例如一个站点的所有图片,或者一个站点的所有音频,也可以下载站 ...

  2. Ubuntu无法telnet

    1.Ubuntu无法telnet的原因 (1)/etc/hosts被修改过 (2)防火墙没有关闭 (3)没有安装相关服务 (4)/etc/inetd.conf文件没有telnet相关内容 2.解决办法 ...

  3. CSP.2020

    自闭jpg. 就说说 PJ 吧. TG炸的原因主要是因为PJ的炸裂以及T1--所以就直接分析根本原因了. # 参考补题链接 # # 推荐博客链接 # 0x00 考前一天晚上. 在LH巨佬家吃了饭,前往 ...

  4. 程序媛数据报告：近三年增长至70%，平均月薪1.54W，女性程序媛并不是特殊物种

  5. Bootstrap Blazor 组件介绍 Table （二）自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  6. 冲刺随笔——Day_Three

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  7. 什么是SSL双向认证，与单向认证证书有什么区别？

    SSL/TLS证书是用于用户浏览器和网站服务器之间的数据传输加密,实现互联网传输安全保护,大多数情况下指的是服务器证书.服务器证书是用于向浏览器客户端验证服务器,这种是属于单向认证的SSL证书.但是, ...

  8. 第15.40节、PyQt（Python+Qt）实战：moviepy实现MP4视频转gif动图的工具

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 在写<第15.39节.splitDockWidget和 ...

  9. PyQt（Python+Qt）学习随笔：QTreeWidgetItem项中列的复选状态访问方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项,项中每列数据都可以单独设置复选状 ...

  10. PyQt(Python+Qt)学习随笔：formLayout的layoutFieldGrowthPolicy属性

    Qt Designer的表单布局(formLayout)中,layoutFieldGrowthPolicy用于控制表单布局中输入部件大小的增长方式.如图: 该字段实际与QFormLayout类的Fie ...