前端面试题及答案：bfc是什么及清楚浮动的原理
2023-09-14 09:02:35 时间
- BFC含义：
- 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
- BFC触发条件：
- 根元素
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
- BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
- 每个元素的margin box的左边， 与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算
相关文章
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- 2020年前端面试题及答案_结构化面试题库及答案
- SQL岗位30个面试题，SQL面试问题及答案「建议收藏」
- HBase面试题「建议收藏」
- QT常见面试题，基础知识偏多
- 京东前端一面面试题
- 腾讯的一份PHP经典面试题（附答案）
- 美团前端二面必会面试题（附答案）
- 京东前端一面常考面试题（附答案）
- 前端高频面试题汇总（一）
- 前端面试指南之JS面试题总结
- 前端高频手写面试题
- 前端常考手写面试题汇总
- 高级前端一面常考手写面试题指南
- 美团前端常见react面试题（附答案）_2023-03-01
- 京东前端二面常考手写面试题（必备）_2023-03-01
- 大数据面试题（一）：HDFS核心高频面试题
- Java面试题之：raft 协议和 zab 协议区别
- Java高频面试题，谈谈你对OAuth的理解，这道题你会了吗？
- 失败前端一面必会react面试题集锦
- 校招前端二面高频vue面试题
- 前端二面手写面试题总结3
- 前端一面必会手写面试题（边面边更）4
- 前端二面高频react面试题集锦_2023-02-23
- 拿到大厂前端offer的前端开发是怎么回答面试题的_2023-03-15
- MySQL面试常问题目精选（mysql简单面试题）
- Redis面试45道考题精华篇（redis面试题45题）
- 一道关于php变量引用的面试题