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. 思维导图软件MindManager的视图介绍

    MindManager思维导图软件提供了多种视图帮助用户更好边界组织思维导图,包括导图视图.大纲视图.甘特图.链接的视图等等,下面将逐一介绍MindManager视图模式及其作用. 打开软件视图功能区 ...

  2. 【Flask】学习笔记（一）入门

    Flask 入门基础 Flask是一个轻量级的后台框架,用Flask作为Web框架的公司有Netfix,Reddit等,国内豆瓣,果壳等.使用flask的公司列表.Flask 有主要的两个依赖,一个是 ...

  3. 关于iOS路径变化的解决方案

    问题描述: 使用沙盒存储文件的时候,我们会保存文件的绝对路劲以便下次读取,但是发现一个现象,我们保存的文件,在第二次打开App去查找的时候,发现找不到了...... 查找原因: iOS8之后,苹果添加 ...

  4. 网络拓扑实例之RRPP单环(五)

    组网图形 RRPP简介 在城域网和企业网的网络规划以及实际组网应用中大多会采用环网结构来提高网络的可靠性.采用环网结构的好处是:当环上任意一个节点或节点之间的链路发生故障,都可以将数据流量切换到备份链 ...

  5. VMware与Device/Credential Guard不兼容问题

    启动虚拟机vmware突然报不兼容错误 解决方法: 1首先打开控制面板>程序>启动或关闭Windows功能, 取消Hyper-v的勾选 2.在往下划,关闭Windows沙盒的勾选沙盒和虚拟 ...

  6. Linux如何安装Docker?

    使用yum安装(centos7) Docker要求Centos系统的内核版本高于3.10,安装Docker前需要验证你的服务器内核版本是否支持Docker. 通过 uname -r 命令来查看你的服务 ...

  7. wsgi_uwsgi_nginx

    1.一些重要概念 https://www.cnblogs.com/xiaonq/p/8932266.html 1.1 web容器 什么是web容器 1.web容器是帮助我们部署java.php.pyt ...

  8. c++11-17 模板核心知识（十）—— 区分万能引用(universal references)和右值引用

    引子 如何区分 模板参数 const disqualify universal reference auto声明 引子 T&&在代码里并不总是右值引用: void f(Widget&a ...

  9. FDR校正

    一.假设检验 假设检验的基本思路是: 设立零假设(null hypothesis)H0,以及与零假设H0相对应的非零假设(alternative hypothesis)H1,在假设H0成立的前提下,计 ...

  10. C语言项目——工程化编程的案例分析

    一.VSCode安装及环境配置 初始在Win下安装Mingw-w64/GCC 和 GDB,在VSCode下打开项目案例,发现在linktable中需要包含pthread头文件.此文件是基于Linux系 ...