type
status
date
slug
summary
tags
category
icon
password
📝 介绍
BFC，即块级格式化上下文（Block Formatting Context），是一个在网页布局过程中起着重要作用的概念。它是 CSS 布局的一部分，用于描述和控制块级盒子的布局、浮动、清除浮动以及相邻块级盒子的关系等。
BFC的主要特点包括：
- 元素在 BFC 内部按照块级盒子布局：在 BFC 内部，元素按照正常的块级盒子布局方式排列，垂直方向上一个接一个地放置，可以使用
margin属性控制元素之间的间距。
- BFC 区域不会与浮动元素重叠：BFC 区域会包含浮动元素，并确保不会与浮动元素重叠。这意味着，如果一个元素触发了BFC，那么它将会包含浮动元素，不会发生浮动元素覆盖BFC边界的情况。
- BFC 内部的盒子会垂直排列：BFC 内部的盒子会在垂直方向上一个接一个地排列，不会发生浮动元素的影响，从而确保了布局的稳定性。
- BFC 内部的浮动元素也会参与高度计算：在 BFC 内部，浮动元素也会参与高度的计算，不会导致元素高度坍塌的问题。
触发BFC的条件包括：
- 根元素或包含根元素的元素
- 浮动元素（float不为none）
- 绝对定位元素（position为absolute或fixed）
- 行内块元素（display为inline-block）
- 表格单元格（display为table-cell）
- 表格标题（display为table-caption）
- overflow不为visible的块级盒子
🤗 总结归纳
利用BFC可以实现一些布局上的特殊效果，比如清除浮动、防止外边距合并等。在实际的网页布局中，了解和合理利用BFC机制能够帮助开发者更好地控制页面布局，避免一些常见的布局问题。
📎 参考文章
- Author:GDYG
- URL:https://gdyg5.top/article/css-bfc
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!