面试官:请说说什么是BFC?大白话讲清楚
BFC到底是什么东西
BFC
全称:Block Formatting Context
, 名为 “块级格式化上下文”。
W3C
官方解释为:BFC
它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context
提供了一个环境,HTML
在这个环境中按照一定的规则进行布局。
简单来说就是,BFC
是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC
呢,BFC
可以看做是一个CSS
元素属性
怎样触发BFC
这里简单列举几个触发BFC
使用的CSS
属性
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
BFC的规则
BFC
就是一个块级元素,块级元素会在垂直方向一个接一个的排列BFC
就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签- 垂直方向的距离由margin决定, 属于同一个
BFC
的两个相邻的标签外边距会发生重叠 - 计算
BFC
的高度时,浮动元素也参与计算
BFC解决了什么问题
1.使用Float脱离文档流,高度塌陷
<!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>高度塌陷</title><style>.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>
效果:
可以看到上面效果给box
设置完float
结果脱离文档流,使container
高度没有被撑开,从而背景颜色没有颜色出来,解决此问题可以给container
触发BFC
,上面我们所说到的触发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>高度塌陷</title><style>.box {margin: 100px;width: 100px;height: 100px;background: red;float: left;}.container {background: #000;display: inline-block;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>
效果:
2.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>.box {margin: 10px;width: 100px;height: 100px;background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>
效果:
可以看到上面我们为两个盒子的margin
外边距设置的是10px
,可结果显示两个盒子之间只有10px
的距离,这就导致了margin
塌陷问题,这时margin
边距的结果为最大值,而不是合,为了解决此问题可以使用BFC
规则(为元素包裹一个盒子形成一个完全独立的空间,做到里面元素不受外面布局影响),或者简单粗暴方法一个设置margin
,一个设置padding
。
修改代码
<!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>Margin边距重叠</title><style>.box {margin: 10px;width: 100px;height: 100px;background: #000;}</style>
</head>
<body><div class="container"><div class="box"></div><p><div class="box"></div></p></div>
</body>
</html>
效果:
3.两栏布局
<!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>两栏布局</title><style>div {width: 200px;height: 100px;border: 1px solid red;}</style>
</head>
<body><div style="float: left;">两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局</div><div style="width: 300px;">我是蛙人,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭</div>
</body>
</html>
效果:
可以看到上面元素,第二个div
元素为300px
宽度,但是被第一个div
元素设置Float
脱离文档流给覆盖上去了,解决此方法我们可以把第二个div
元素设置为一个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>两栏布局</title><style>div {width: 200px;height: 100px;border: 1px solid red;}</style>
</head>
<body><div style="float: left;">两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局</div><div style="width: 300px;display:flex;">我是蛙人,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭,如有帮助请点个赞叭</div>
</body>
</html>
效果:
结语
谢谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎各位指正。
我是蛙人(✿◡‿◡),如果觉得写得可以的话,请点个赞吧❤。
感兴趣的小伙伴可以关注 “前端娱乐圈” 公众号。
写作不易,「点赞」+「在看」+「转发」 谢谢支持❤
参考
https://blog.csdn.net/weixin_43213962/article/details/105959869
https://blog.csdn.net/sinat_36422236/article/details/88763187
面试官:请说说什么是BFC?大白话讲清楚相关推荐
- redis分布式锁,面试官请随便问,我都会
文章有点长并且绕,先来个图片缓冲下! 前言 现在的业务场景越来越复杂,使用的架构也就越来越复杂,分布式.高并发已经是业务要求的常态.像腾讯系的不少服务,还有CDN优化.异地多备份等处理. 说到分布式, ...
- 面试官:什么是BFC?BFC有什么特性?如何创建BFC?BFC有什么作用?
面试官:什么是BFC?BFC有什么特性?如何创建BFC?BFC有什么作用? 程序员鱼乐,全网同名,分享编程知识与生活日常.还是个小菜狗,喜欢分享知识,如有错误还请大佬们指出,欢迎大佬评论区补充知识. ...
- 求职者哪些行为会让面试官反感呢?
在面试中,面试官是决定你去留的最大因素,久经职场的面试官,都是"老狐狸",他们往往能从求职者一个小小动作.一句潜意识的回答,判断出一个人的性格.做人原则,很多人就是忽视了一些小细节 ...
- 面试官问:请拿出一段体现你水平的代码,我该如何回答?
程序员面试,免不了被问代码问题.如果面试官问你,最能代表你的当下水平的代码是什么?你该怎么回答呢?知乎的几位作者给出了优秀答案. 每天下班前半小时都会运行这段. #include <stdlib ...
- 如何把class里的vector结构体memcpy出来_面试官:请说出线程安全的 ArrayList 有哪些,除了Vector...
以下环境是 JDK 1.8 ArrayList 的初始容量 面试官:你看过 ArrayList 的源码? Python 小星:看过 面试官:那你说下ArrayList 的初始容量是多少? Python ...
- arraylist 后往前遍历_面试官:请说出线程安全的 ArrayList 有哪些,除了Vector
以下环境是 JDK 1.8 ArrayList 的初始容量 面试官:你看过 ArrayList 的源码? Python 小星:看过 面试官:那你说下ArrayList 的初始容量是多少? Python ...
- 干趴面试官系列 | 请你简述一下Kafka中的分区分配
欢迎跳转到本文的原文链接:https://honeypps.com/mq/kafka-basic-knowledge-of-partition-assignors/ "请你简述一下Kafka ...
- 吊打面试官!Redis 常见面试题请收好 | 原力计划
作者 | 敖丶丙 责编 | Elle 出品 | CSDN 博客 你知道的越多,你不知道的越多 GitHub地址 https://github.com/AobingJava/JavaFamily 已经开 ...
- 疫情下的春招季:AI面试官已就位,请接招!
全文共2966字,预计学习时长10分钟 图源:tech.sina.com.cn 疫情笼罩之下,春招倒春寒眼看就要到来.本该在双选会上大展风采的求职者,只能穿着睡衣在家里刷手机.2020春招要凉凉了吗? ...
- 面试后要请你吃饭_请面试官吃饭应该聊些什么?
我猜测题主的场景是,在面试之后,正好到了吃饭点,正好面试官也要吃饭了,就请面试官一起吃饭,顺道继续推销一下自己,饭桌上怎么聊天? 简单说:不要请面试官吃饭,除非面试官主动邀请你吃饭 为什么不要请面试官 ...
最新文章
- log4j的NDC/MDC区别与应用
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
- python3 x默认使用的编码_python3默认使用什么编码
- 深入Redis客户端(redis客户端属性、redis缓冲区、关闭redis客户端)
- 发布一个 Linux 下的 C++ 多线程库
- JavaScript 中数组 sort() 方法的基本使用
- python向数据库中添加参数_python往mysql数据库中写入数据和更新插入数据
- MyBatis(三)------MyBatis的核心组件
- 软件工程——结构化分析习题
- OpenCV 3 image shape - size - dtype
- 为什么有的python内置函数怎么就一个pass?
- FME 2011预览:新特性 IFMEWorkspaceRunner
- 【从零学习openCV】IOS7根据人脸检测
- AutoCAD 2010将不再安装VBA
- AVG流氓软件卸载方法
- 测试通达信指标胜率的软件,如何测试通达信指标成功率?
- 解决:android 开发 WIFI 功能 密码输入正确时监听的问题
- Listwise View Ranking for Image Cropping论文理解
- uc浏览器启动在pc端调试
- 《人人都是产品经理》总结
热门文章
- ArcGIS教程:使用 Spatial Analyst 工具条
- Uni-app微信小程序开发
- 推荐一款自己常用的web前端框架
- 支付宝小程序上传图片my.uploadFile
- 元宇宙和web3.0的前世今生
- 单Reactor和主从Reactor模式介绍
- MySQL 服务正在启动 MySQL 服务无法启动解决途径
- 网页直播英文版上线,跨国企业客户用着很酷哇
- 酒店50台无盘服务器配置单,你对宾馆、网吧无盘系统了解多少?
- 在linux下给编辑文件在哪里设置密码,Linux中利用Vim对文件进行密码保护的方法详解...