系统开发北京网站建设,画册模板,工业电商网站怎么配色,省住房和城乡建设厅官方网站文章目录面试高出场率什么是BFC触发BFC的条件BFC的约束规则BFC可以解决的问题面试高出场率
在前端的面试中#xff0c;经常会遇到BFC的问题#xff0c;比如#xff1a;说说你对BFC的理解、你在项目中运用到的BFC、BFC是什么、BFC的作用是什么。。。。
很多同学很懵逼…
文章目录面试高出场率什么是BFC触发BFC的条件BFC的约束规则BFC可以解决的问题面试高出场率
在前端的面试中经常会遇到BFC的问题比如说说你对BFC的理解、你在项目中运用到的BFC、BFC是什么、BFC的作用是什么。。。。
很多同学很懵逼不知道这个问题在问什么在这里小编就给大家讲解一下关于BFC 小提示这个问题重点是BFC是什么BFC触发的条件有哪些BFC可以干什么。这里我们可以试着讲解了一下Boostrap的清除浮动displaytable创建匿名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-cellHTML表格单元格默认属性)表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)具有overflow 且值不是 visible 的块元素弹性盒flex或inline-flexdisplay: flow-rootcolumn-span: all
BFC的约束规则
内部的盒会在垂直方向一个接一个排列可以看作BFC中有一个的常规流处于同一个BFC中的元素相互影响可能会发生外边距重叠每个元素的margin box的左边与容器块border box的左边相接触(对于从左往右的格式化否则相反)即使存在浮动也是如此BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素反之亦然计算BFC的高度时考虑BFC所包含的所有元素连浮动元素也参与计算浮动盒区域不叠加到BFC上
BFC可以解决的问题
垂直外边距重叠问题 去除浮动 自适用两列布局float overflow
