一篇文章带你搞定BFC~
2022/8/2 23:24:08
本文主要是介绍一篇文章带你搞定BFC~,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、什么是BFC
- 是 Block Formatting Contexts 的缩写,名为“块级格式化上下文”。
- 是指浏览器中创建了一个独立的渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
二、BFC的特点
- 具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何变化,都不会影响到外部。
三、怎样触发BFC
-
overflow: hidden
-
position: absolute
-
position: fixed
-
display: inline-block
-
display: table-cell
-
display: flex
四、BFC布局规则
-
BFC 就是一个块级元素,块级元素会在垂直方向一个接一个的排列
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。同样外面的也不会影响里面的。
-
垂直方向的距离由margin决定, 属于同一个
BFC
的两个相邻的标签外边距会发生重叠 -
计算BFC的高度时,浮动元素也参与计算
五、BFC解决了什么问题
-
问题:在子元素设置成浮动元素的时候,会产生父元素高度塌陷的问题。
-
解决方法:给父元素设置overflow:hidden;的时候会产生BFC由于在计算BFC高度时,自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候,通过激发父盒子的BFC功能,会产生清除浮动的效果。
-
问题:属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
-
解决方法:根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质,可以给其中一个盒子再包裹一个盒子父元素,并触发其BFC功能(例如添加overflow:hidden;)这样垂直方向的两个盒子就不在同一个BFC中了,因此也不会发生垂直外边距合并的问题了。
六、结语
非常感谢您能读完这篇文章,也欢迎评论补充哦,如果您感觉这篇文章对您有帮助的话,希望您能点个推荐和收藏哦,非常感谢!
这篇关于一篇文章带你搞定BFC~的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升