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. 你还在 if...else？代码这样写才好看！

    前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...

  2. {"non_field_errors":["Unable to log in with provided credentials."]}% 无法使用提供的凭据登录

    在使用rest_framework_jwt进行登陆验证获取token的时候会报 {"non_field_errors":["Unable to log in with p ...

  3. 蓝桥杯——Java集合练习题

    回文数.维密.约瑟夫环 回文数 问题描述: 123321是一个非常特殊的数,它从左边读和从右边读是一样的.输入一个正整数n, 编程求所有这样的五位和六位十进制数,满足各位数字之和等于n. 输入格式: ...

  4. Java基础教程——使用Eclipse快速编写Java输入输出代码

    Eclipse安装 IDE:Integrated Development Environment,集成开发环境.好比是全自动洗衣机. 此处使用[eclipse-jee-4.6-neon-3-win32 ...

  5. 基于HAL库的STM32的DSP库详解(附FFT应用)

    1 . 建立工程,生成代码时选择包含所有库.   2. 打开 option for target 选择 Target 标签,在code generatio中,将floating point hardw ...

  6. 我与PHP，ULM和Vue.js不得不说的故事（一个放荡不羁与一个神神秘秘一个似曾相识，从入门到放弃记录第二章）

    ·关于UML(git) 究竟是命运在茫茫语言之中遇到了你,还是我的魅力让你向我奔涌而来.好吧都不是,我俩就像古代包办婚姻,被专业牢牢的绑在一起了,既然都是一条绳上的蚂蚱.我我们应该能体谅彼此的不容易, ...

  7. Spring Boot + Sharding-JDBC 读写分离

    本文使用 Sharding-JDBC 实现读写分离,基于 CentOS 7 + MySQL 5.7 一.MySQL 安装及配置 1.1 安装 依次执行命令: sudo wget -i -c http: ...

  8. PyQt（Python+Qt）学习随笔：QDateTimeEdit日期时间编辑部件

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 Designer输入部件中,Date/Time E ...

  9. 老猿学5G随笔：RAN、RAT以及anchor移动性锚点的概念

    最近在学习UPF的功能时,有这样一句话"用户平面功能(UPF)包括以下功能. 用于RAT内/ RAT间移动性的锚点(适用时)",这句话不理解,后来看到了<关于移动锚点的理解! ...

  10. 添加和读取Resources嵌入资源文件（例如.dll和.ssk文件）

    前言:有些程序运行的时候,可能调用外部的dll,用户使用时可能会不小心丢失这些dll,导致程序无法正常运行,因此可以考虑将这些dll嵌入到资源中,启动时自动释放.对于托管的dll,我们可以用打包软件合 ...