和面试官谈谈BFC

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 和面试官谈谈BFC

什么是BFC



首先,什么是FC,FC的全称是 Formating Context(格式化上下文)。元素在标准流里面都是一个FC,例如 div,p 标签等都是属于一个FC。


看一下W3c的文档对标准流和formatting context的解释


9.4 Normal flow


Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.


简而言之

  • 块级元素的布局是属于BFC(Block Formatting Context)
  • 行内级元素的布局是属于IFC(Inline Formatting Context)


那么我们可以理解为,块级元素布局的上下文环境就是BFC,它就是一个大箱子,与外部环境隔离


形成BFC条件(直接照搬MDN)



创建新的块格式上下文


<html> 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC

除了文档的根元素 (<html>) 之外,还将在以下情况下创建一个新的 BFC:


  • 使用float 使其浮动的元素
  • 绝对定位的元素 (包含 position: fixed 或position: sticky
  • 使用以下属性的元素 display: inline-block
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  • 表格标题或使用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-root 或 display: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all


总结一下:html是一个BFC, 但是body不是一个BFC,overflow属性除了visible外都是一个BFC


BFC的作用



9.4.1 Block formatting contexts


In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.


In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).


简单概述如下


  • 在BFC中,box会在垂直方向上一个挨着一个排布
难怪块级元素会独占一行,原来是BFC的作用


  • 垂直方向上的间距由margin属性决定
  • 在同一个BFC中,相邻两个box之间的margin会折叠

在BFC中,每一个元素的左边缘是紧挨着包含块的左边缘的

刚刚我们说html也是一个BFC,现在大家知道页面布局的时候为什么都会默认靠左对齐了吧


那这个东西有什么用呢


  • 解决margin折叠问题
我们可以形成两个不同的BFC,因为只有在同一个BFC中,相邻两个box之间的margin会折叠


解决浮动高度塌陷问题

BFC解决高度塌陷需要满足两个条件
     1.浮动的父元素触发BFC,形成独立的块格式化上下文
     2.浮动元素的父元素是auto的


10.6.7 ‘Auto’ heights for block formatting context roots


In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:


If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.


If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.


Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.


In addition, if the element has any floating descendants whose bottom margin edge is below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.


BFC的高度是auto的情况下,是如下方法计算高度的


1.如果只有inline-level,是行高的顶部和底部的距离

2.如果有block-level,是由最底层的块上边缘和最底层块的下边缘之间的距离

3.如果有绝对定位元素,将被忽略

4.如果有浮动的元素,那么会增加高度以包括这些浮动元素的下边缘

网上也有很多BFC的例子,我就不写拉,有人看再补充点小例子







相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
打赏
0
0
0
0
3
分享
相关文章
面试官: 谈谈你对BFC的理解以及外边距合并的问题
面试官: 谈谈你对BFC的理解以及外边距合并的问题
107 0
面试官常问的清除浮动和BFC ——看完不再担心面试问题
面试官常问的清除浮动和BFC ——看完不再担心面试问题
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
71 10
大白话阐述什么是BFC(一道可能的面试题)
大白话阐述什么是BFC(一道可能的面试题)
119 0
大白话阐述什么是BFC(一道可能的面试题)
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
大厂面试必看!Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类,包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景,并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点,帮助读者更好地理解和应对面试中的问题。
100 4
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
151 2
第二次面试总结 - 宏汉科技 - Java后端开发
本文是作者对宏汉科技Java后端开发岗位的第二次面试总结,面试结果不理想,主要原因是Java基础知识掌握不牢固,文章详细列出了面试中被问到的技术问题及答案,包括字符串相关函数、抽象类与接口的区别、Java创建线程池的方式、回调函数、函数式接口、反射以及Java中的集合等。
55 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等