bfc是什么_一次弄懂css的BFC
前言
BFC在css的学习中是重要的但不易理解的概念,BFC也牵扯了很多其他问题,如浮动、定位、盒模型等,因此弄懂BFC是很有必要的。本文对BFC进行总结,希望对你有所帮助。
BFC是什么?
先看看MDN的定义:
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
官方文档的说法很难理解,查阅多方资料后,得到以下的结论:
BFC(block formatting context)块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,它决定了元素如何对齐内容进行布局,以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局
简短的总结:BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响
BFC的布局规则
- 内部的Box会在垂直方向一个接着一个地放置。
- Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
- 每个盒子的左外边框紧挨着包含块的左边框,即使浮动元素也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动子元素也参与计算。
如何触发BFC?
这里只记录常用方法,想要了解全部触发BFC的方法请点击此链接
![](/assets/blank.gif)
BFC可以解决哪些问题?
- 解决浮动元素令父元素高度坍塌的问题
方法:给父元素开启BFC
原理:计算BFC的高度时,浮动子元素也参与计算
演示:
![](/assets/blank.gif)
- 非浮动元素被浮动元素覆盖
方法:给非浮动元素开启BFC
原理:BFC的区域不会与float box重叠
演示:
![](/assets/blank.gif)
- 两栏自适应布局
方法:给固定栏设置固定宽度,给不固定栏开启BFC。
原理:BFC的区域不会与float box重叠
演示:
![](/assets/blank.gif)
- 外边距垂直方向重合的问题
方法:给上box或者下box任意一个包裹新的box并开启BFC
原理:属于同一个BFC的两个相邻的Box的margin会发生重叠。
演示:
![](/assets/blank.gif)
结语
以上就是本文关于BFC的全部内容,如果有不正确的地方,欢迎大家指正。码字不易,且赞且珍惜。
参考
BFC官方文档
bfc是什么_一次弄懂css的BFC相关推荐
- 彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉 实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...
- php 函数有命名空间吗_一篇弄懂PHP命名空间及use的使用
最近一段时间在研究php框架,一直想的什么时候才能开发出自己的框架,当然这是为了提升自己的编程水平,同时能把平时学的零散的东西糅合在一块熟练应用.但是开发一个框架根本不知道如何做起,先开发什么,虽然p ...
- CAD2010 为了保护_一文弄懂,锂电池的充电电路,以及它的保护电路方案设计
原标题:一文弄懂,锂电池的充电电路,以及它的保护电路方案设计 锂电池特性 首先,芯片哥问一句简单的问题,为什么很多电池都是锂电池? 锂电池,工程师对它都不会感到陌生.在电子产品项目开发的过程中,尤其是 ...
- controller 用 map 接收值_一文弄懂apply、map和applymap三种函数的区别
CDA数据分析师 出品 在日常处理数据的过程中,会经常遇到这样的情况,对一个DataFrame进行逐行.逐列或者逐元素的操作,很多小伙伴也知道需要用到apply.map或者applymap,但是具体什 ...
- python 结构体数组 定义_一篇文章弄懂Python中所有数组数据类型
前言 数组类型是各种编程语言中基本的数组结构了,本文来盘点下Python中各种"数组"类型的实现. list tuple array.array str bytes bytearr ...
- 查看dataloader的大小_一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
以下内容都是针对Pytorch 1.0-1.1介绍. 很多文章都是从Dataset等对象自下往上进行介绍,但是对于初学者而言,其实这并不好理解,因为有的时候会不自觉地陷入到一些细枝末节中去,而不能把握 ...
- bytes数组转string指定编码_一篇文章弄懂Python中所有数组数据类型
前言 数组类型是各种编程语言中基本的数组结构了,本文来盘点下Python中各种"数组"类型的实现. list tuple array.array str bytes bytearr ...
- Stale branches 设置_一文弄懂!Word页眉页脚设置,So easy~
点击上方蓝字关注星标★不迷路 论文排版,一直是同学们非常头疼的问题. 其中,最让人头疼的,就是页眉页脚的设置了. 毕竟,页眉页脚「牵一发而动全身」,稍微修改一点,其他的都会变动,很是麻烦. 为了帮助大 ...
- in作为介词的用法_三分钟弄懂“at”,“in”,“on”三个时间介词的基本用法!...
"at","in","on"都是介词,他们既可以做方位介词,也可以做时间介词.很多人会弄不清他们的用法,我尝试用一种比较简单的方式,帮助大家 ...
最新文章
- REST /使用提要发布事件
- 【渝粤教育】广东开放大学 网页设计与制作 形成性考核 (25)
- .Net序列化与反序列化的2种方法
- 微信重大更新,mac版可刷朋友圈!可以看,可以评论! 支持M1
- 推荐几个 Go 测试工具和技巧让你在虎年如虎添翼
- word文档小方格怎么弄_word文档小方格怎么打勾
- 部署腾讯云(CentOS6.6版本,jdk1.7+tomcat8+mysql)
- Excel 在某一列中寻找最大值并加粗
- vs2017+配置工程的编译路径(输出目录和中间目录)
- 集中火力,专项击破!数据分析可视化广深线下培训火热来袭
- Unity2019配置ARCore环境
- 互联网思维的“独孤九剑”
- 【DPDK】网卡绑定和解绑步骤
- javascript,jQuery,vue的区别
- 最佳实践 缓存穿透,瞬间并发,缓存雪崩的解决方法
- Java实现多附件的邮件发送
- 上拉电阻、下拉电阻的理解
- 基于RFID技术的考勤系统设计
- 【前端】1.学习了一段时间的vue,总结一下Vue书写规范
- 查看Oracle sys_lob,system表空间满的处理-SYS_LOB0003450292C00039$$