一文带你吃透BFC

文章目录

      • 面试高出场率
      • 什么是BFC
      • 触发BFC的条件
      • BFC的约束规则
      • BFC可以解决的问题

面试高出场率

在前端的面试中,经常会遇到BFC的问题,比如:说说你对BFC的理解、你在项目中运用到的BFC、BFC是什么、BFC的作用是什么。。。。

很多同学很懵逼,不知道这个问题在问什么,在这里小编就给大家讲解一下关于BFC

小提示:这个问题重点是BFC是什么,BFC触发的条件有哪些,BFC可以干什么。这里我们可以试着讲解了一下Boostrap的清除浮动(display:table创建匿名table-cell间接触发BFC),如果有看到别的场景使用或者自身有使用的场景可以尝试讲解一下使用技巧。这样可以让面试官觉得你不仅仅知道他问的东西是什么,你还能很好的使用它。

什么是BFC

BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用,当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围,把它理解成是一个独立的容器,并且这个容器里box的布局与这个容器外的box毫不相干。

触发BFC的条件

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 具有overflow 且值不是 visible 的块元素
  • 弹性盒(flex或inline-flex)
  • display: flow-root
  • column-span: all

BFC的约束规则

  • 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流)
  • 处于同一个BFC中的元素相互影响,可能会发生外边距重叠
  • 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
  • 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算
  • 浮动盒区域不叠加到BFC上

BFC可以解决的问题

垂直外边距重叠问题
去除浮动
自适用两列布局(float + overflow)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Python语言使用RabbitMQ消息队列(一)

介绍 RabbitMQ 是一个消息中间人(broker): 它接收并且发送消息. 你可以把它想象成一个邮局: 当你把想要寄出的信放到邮筒里时, 你可以确定邮递员会把信件送到收信人那里. 在这个比喻中, RabbitMQ 就是一个邮筒, 同时也是邮局和邮递员 . 和邮局的主要不同…

爆赞程序猿开发软件

VSCode 使用 IntelliSense 超越语法突出显示和自动完成,它提供基于变量类型、函数定义和导入模块的智能完成 直接从编辑器调试代码。启动或附加到您正在运行的应用程序并使用断点、调用堆栈和交互式控制台进行调试 与 Git 和其他 SCM 提供商合作从未如此简单。查…

如果你在北京失业了,别怕,记得去领这笔钱!最少2034元/月!

人在江湖飘,哪能不挨刀 公司倒闭,老板走人,公司裁人 …… 就要被迫失业了 别怕! 如果你在北京失业了 记得去领这笔钱——失业保险金 每月最多有2143元 虽然钱不多,但能解燃眉之急 帮助你度过困难日子 重点全程网上就能…

真实诠释程序员日常的二十四张图【你中了几个】

当你打开遗留代码时 扒下来项目后改了一行代码…… 程序员调试css样式的时候 当你的try catch 不起作用 产品经理对你说要兼容IE 没有ui给你提供大小设计的结果 没吃透需求直接开发的你 程序员修复bug的真实处境 当你开始使用库,但忘记阅读文档 产品经理告诉你这只是…

Git学习原版手稿

手稿诞生记 Git学习的时候难免会有遗忘然后往复学习查看的过程,所以就形成了这个学习的手稿,记录了Git使用过程中的大部分命令,今天在清理的时候偶然看到了这些记录,而且最近也在写Git的使用教程,大致的学习线路也是按…

程序员首选编程电脑【火爆来袭】

作为一名程序员肯定会常用到一些编程软件,所以需要设备的配置参数上不能太差,不仅是要以稳定强大输出为基本,内存、音响、续航等方面也不可或缺。 直奔主题 如果你手里资金到位,那必须整一步到位——MacBook 对于这款大佬型笔记本…

201671010456-张琼 实验十四 团队项目评审课程学习总结

博文简要信息表 项目内容这个作业属于哪个课程http://www.cnblogs.com/nwnu-daizh/这个作业的要求在哪里https://www.cnblogs.com/nwnu-daizh/p/11093584.html课程学习目标掌握软件项目评审会流程,反思总结课程学习内容。任务一 验收意见表GitHub仓库地址https://gi…

强大的APIClound云修复——告别繁琐的编译打包流程

小编接到一项目的二期开发任务,拉下代码开始熟悉大概的框架、技术、上线流程等前期工作,本app是通过vue技术进行开发,使用ui是 vant 库,打包上线则是使用的 APIClound 平台; 在我们的app上线后,如果我们改…

研究下贝塞尔曲线

今天研究了下贝塞尔曲线,感觉还是很有价值的。 这里贝塞尔曲线是几个用法: 1.模拟曲线拟合。将折线找一个平滑的方案获得曲线的效果。联想可以获知,可以作为工程设计的一种方式。 2.模拟抛物线和实际场景中的一些物理特性,即物理上…

你对ES6究竟了解多少?—— 有这一篇就够用了

1. ES6相关概念(★★) 1.1 什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 是ES2015以后的泛称 1.2 为什么使用 ES6 ? 每一次标准的诞生都意味着语言的完善,功能的加强。JavaScrip…

科创板基础知识

交易制度 1、上市前5个交易日不设将跌幅限制;其后涨跌幅限制为 20%; 2、单笔申报不小于 200股。 参考资料: 科创板图文解读 科创板投教长图文系列(四):详解科创板股票交易的特别规定 上交所投教&#xff1a…

0_0 保留字

引自《 JavaScript 权威指南》2.4 / P28 ~ 29 保留字 部分 保留字 JavaScript 把一些标识符拿出来用作自己的关键字。因此,就不能再在程序中把这些关键字用作标识符了: 保留字 Part1.txt123456breakdelete functionreturntypeofcasedoifswitchvarc…

JavaScript 高级——详谈面向对象

1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。…

UVa202Repeating Decimals (循环小数)

解答&#xff1a; 因为除数是固定的&#xff0c;所以只要判断被除数是否出现过即可。 #include<iostream> #include <cstdio> #include <cstring> using namespace std; int m,n,vis[5000],res[5000],temp[5000],num,t,x; int main() {while(scanf("%d%…

构造函数、原型、继承原来这么简单?来吧,深入浅出

构造函数 小编上篇博客中介绍到的通过关键字class方式定义类&#xff0c;然后根据类再创建对象的方式&#xff0c;是ES6中语法&#xff0c;现在很多浏览器对ES6的支持还不是很好&#xff0c;所以也要学习通过构造函数&#xff08;构建函数&#xff09;的方式创建对象 问&…

[网络流24题] 航空路线问题 (费用流)

洛谷传送门 LOJ传送门 这道题的图还挺好想的吧 反正都是无向边&#xff0c;起点走到终点再回到起点&#xff0c;就相当于从起点走$2$次到达终点&#xff0c;且这两次不经过相同的点&#xff0c;还要经过尽可能多的点 很经典的费用流建图 限制点通过次数->拆点连边&#xff0…

Go语言字符串和正则表达式

字符串相关方法 获取字符串长度 注意: Go语言编码方式是UTF-8,在UTF-8中一个汉字占3个字节package main import "fmt" func main() { str1 : "lnj" fmt.Println(len(str1)) // 3 str2 : "lnj" fmt.Println(len(str2)) // 12 } 如果字符串中包含中…

你疏漏的 JS 函数硬核知识?这里帮你总结了

重点 更多前端知识 诚邀各位前端从事者爱好者加入前端大佬技术交流社区&#xff0c;本社区主要分享技术栈、个人心得、技术交流、问题解惑等前端体系交流 点击下方文字加入 前端大佬技术交流社区 1. 函数的定义和调用 1.1 函数的定义方式 方式1 函数声明方式 function 关键…

7 月 1 日

7 月 1 日 今日内容 1.计算机基础知识 2.python简介 3.快速入门 昨日回顾 无内容详细 1.计算机基础知识 输入输出设备 CPU 硬盘 电源 中央处理器 处理各种数据 相当于人的大脑 内存 存储数据 硬盘 存储数据的 什么是操作系统 控制计算机工作的流程 软件 什么是应用程序 安装在操…

再见了 React、Angular,Vue3 才是 yyds

切记一定要看到最后&#xff01;&#xff01;&#xff01; 最近看到一篇文章上面是一作者资讯一位IT前辈&#xff0c;问他怎么看待工作 2 年的前端开发&#xff0c;月薪就高达 30k、40k 的现状。 他说&#xff0c;在众多编程技术中&#xff0c;前端算比较容易入门和提升的&am…