面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？

程序员鱼乐，全网同名，分享编程知识与生活日常。还是个小菜狗，喜欢分享知识，如有错误还请大佬们指出，欢迎大佬评论区补充知识。

什么是BFC?

BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。

BFC有什么特性？

BFC是一个块级元素，块级元素在垂直方向上依次排列。
BFC是一个独立的容器，内部元素不会影响容器外部的元素。

属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 200px;height: 400px;background-color: green;overflow: hidden;}.continer .box1 {width: 100px;height: 100px;margin-bottom: 20px;background-color: red;}.continer .box2 {width: 100px;height: 100px;margin-top: 40px;background-color: red;}</style>
</head>
<body><div class="continer"><div class="box1">box1</div><div class="box2">box2</div></div>
</body>
</html>

视图：

计算BFC高度时，浮动元素也要参与计算。

如何创建BFC?

给父级元素添加以下任意样式

overflow: hidden;
display: flex;
display: inline-flex;
display: inline-block;
position: absolute;
position: fixed;

Tip：记住这几个常用的就可以了。

BFC有什么作用？

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题

解决前代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 900px;background: black;}.box1{height: 300px;width: 300px;background: red;float: left;}.box2{height: 300px;width: 300px;background: blue;float: left;}</style>
</head>
<body><div class="continer"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

解决前视图：

解决后代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 900px;background: black;overflow: hidden;}.box1{height: 300px;width: 300px;background: red;float: left;}.box2{height: 300px;width: 300px;background: blue;float: left;}</style>
</head>
<body><div class="continer"><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

解决后视图：

解决子级元素外边距会使父级元素塌陷的问题

解决前源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 100px;height: 200px;background: green;}.box{margin-top: 20px;height: 50px;width: 50px;background: red;}</style>
</head>
<body><div class="continer"><div class="box"></div></div>
</body>
</html>

解决前视图：

解决后源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 100px;height: 200px;background: green;overflow: hidden;}.box{margin-top: 20px;height: 50px;width: 50px;background: red;}</style>
</head>
<body><div class="continer"><div class="box"></div></div>
</body>
</html>

解决后视图

Tip：当然这个问题也可以通过将子级元素的margin-top改为父级元素的padding-top来解决。

总结：面试官会考察你对BFC的理解，如何创建BFC以及BFC的作用等。如有错误，还请大家批评指正。大家如果有补充的，欢迎留言评论。

面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？相关推荐

春招面试阿里，面试官让我说说Java8的新特性
文章目录一.Lambda表达式和函数式接口二.接口的默认方法和静态方法三.方法引用四.重复注解五.更好的类型推断六.拓宽注解的应用场景七.Optional 八.Streams 九.Dat ...
面试官：谈谈对JS闭包的理解及常见应用场景(闭包的作用)
文章目录对JS闭包的理解及常见应用场景(闭包的作用) 1.变量作用域 2.如何从外部读取函数内部的变量? 3.闭包概念 4.闭包用途 5.闭包的理解 6.闭包应用场景 setTimeout传参回调 ...
面试官：你来说一下Spring IOC容器的创建过程
这篇文章主要讲解 IOC 容器的创建过程,让你对整体有一个全局的认识,文章没有复杂嵌套的 debug 流程,相对来说比较简单. 不 BB,上文章目录. 1. 基础知识 1.1 什么是 Spring I ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
我在华为做Android外包的真实经历！吊打面试官系列！
导语本部分内容是关于Android进阶的一些知识总结,涉及到的知识点比较杂,不过都是面试中几乎常问的知识点,也是加分的点. 关于这部分内容,可能需要有一些具体的项目实践.在面试的过程中,结合具体自身 ...
你好，面试官 | 你拿Java Map考验老干部？
小龙有话说本期会模拟面试 Map 相关内容. 涉及知识点,Map 常使用实现类使用场景,特性:Hash算法:HashMap原理剖析:分段锁:ConcurrentHashMap: 本期题改编自 --2 ...
你在面试时是否无意中暴露了缺点？资深面试官如何从细节中看候选人的软实力...
面试时,面试官不仅会考察专业技能,更得考察候选人的软实力,比如候选人的沟通能力,以及团队协作能力,更重要的是,得确保候选人不是刺头,能和现有团队和睦相处.如果发现候选人虽然能力很强,但进团队后由于沟通 ...
面试官：请说说什么是BFC？大白话讲清楚
BFC到底是什么东西 BFC 全称:Block Formatting Context, 名为 "块级格式化上下文". W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及 ...

面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？

面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？

什么是BFC?

BFC有什么特性？

如何创建BFC?

BFC有什么作用？

总结：面试官会考察你对BFC的理解，如何创建BFC以及BFC的作用等。如有错误，还请大家批评指正。大家如果有补充的，欢迎留言评论。

面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？相关推荐

最新文章

热门文章