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. 【VUE】7.组件通信（二）子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  2. 为什么Java不允许创建范型数组

    问题示例 List<Integer>[] intListArr = new ArrayList<Integer>[8]; // 编译时报错 能看到这么看似没啥问题的一个简单语句 ...

  3. 【电子取证：镜像仿真篇】Windows Server镜像仿真、vmdk镜像仿真

    Windows Server镜像仿真.vmdk镜像仿真 时间过得真快呀!--[suy999] Windows Server镜像仿真.vmdk镜像仿真 一.qemu-img镜像转换工具 (一)raw.q ...

  4. Contest 984

    A 先手取最大,后手取最小,答案就是第 \(\left\lceil\frac{n}{2}\right\rceil\) 小的数. 用 nth_element 可以做到 \(O\left(n\right) ...

  5. 蓝桥杯——字母阵列(2018JavaC组第3题)

    字母阵列(18JavaC3) 标题:字母阵列 仔细寻找,会发现:在下面的8x8的方阵中,隐藏着字母序列:"LANQIAO". SLANQIAO ZOEXCCGB MOAYWKHI ...

  6. miniconda安装及使用

    conda环境配置 安装conda [清华源下载地址](https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/) 官网或百度云网盘下载对应版本 ...

  7. Spring beanDefinition载入

    @Override public void refresh() throws BeansException, IllegalStateException { synchronized (this.st ...

  8. 交换机Access、Trunk和Hybrid 接口类型及区别

    交换机接口的类型可以是 Access.Trunk和Hybrid. Access类型的接口仅属于一个VLAN,只能接收.转发相应VLAN的帧: Trunk类型接口则默认属于所有VLAN,任何 Tagge ...

  9. 在HTML中调用打开摄像头

    1 <img src="imgs/qr.png" alt=""> 2 <video src=""></vide ...

  10. Centos7配置阿里epel源|yum源

    这一步非常重要.重要.重要.在这解释一下源的概念,打个比方如果手机想获取一个软件,可以选择很多途径,如华为的华为商店,小米的应用商店,苹果的App store,源就相当于各种手机获取软件的商店.因为国 ...