一、 什么是BFC
BFC (Block Formatting Context) 块级格式化上下文
BFC 是 CSS 布局中的一个重要概念，它创建了一个独立的渲染区域，决定了内部元素如何布局以及如何与外部元素交互。
核心特征
1. 浮动隔离
- 包含内部浮动：BFC 会计算内部浮动元素的高度，解决浮动元素导致的父元素高度塌陷问题（如
float导致的父元素高度为 0 的问题） - 排除外部浮动：外部的浮动不会遮挡BFC区域
2. 防止外部塌陷
普通文档流中，相邻块级元素的垂直 margin 会合并（取较大值）
💡 小扩展
常见的块级元素有那些呢：
<p><div><h1~h6><ul> <ol> <li><dl> <dt> <dd> <table><form><audio> <video>.…非块级元素：
<a><span><img><input><label><template>
二、 怎样实现BFC呢
仅展示常用的
-
overflow属性：
overflow: hidden;、overflow: auto;、overflow: scroll;(值不为 visible 或 clip 的块级元素) -
设置浮动元素：
float: left;float: right; -
设置定位：
position: absolute;position: fixed; -
设置display属性：
display: flex;display: grid;display: inline-block;display: table-cell;…
特殊场景：在某些情况下，我们希望创建 BFC 的同时，不影响文本的正常显示和排版？
display：flow-root; 它专门用于创建一个独立的布局上下文，不会像其他方法那样对文本产生额外的副作用，为开发者提供了更灵活、更精准的布局选择。
如果想进一步深入了解 BFC 的相关知识，可以参考 MDN 文档：developer.mozilla.org/zh-CN/docs/… ，那里有更全面、更详细的讲解和示例。
到这里就结束啦，有什么问题的话都可以指出，如果觉得有所收获，不妨点个赞支持一下～
