# ✍️述-BFC

# BFC-Examples

BFC - 块级格式化上下文·Block Formatting Context

在我看来，BFC就是一个规则，一个符合正常思维的css排布规则，就目前情况来看，css作用没有达到正常效果，需要套用BFC这个规则框将其约束到正常轨道。

本文主要聚焦亮点：

• BFC如何触发？
• BFC可以解决什么问题？

# 📖1. BFC如何触发？

BFC的触发很简单，设置一些必要属性就可以激活

1. 浮动 | float { 不为none }

2. 绝对定位 |absolute, fixed

3. display | inline-block, table-cell, table-caption

4. overflow | hidden, auto, scroll { 这个用的比较多 - overflow: hidden; }

# 📖2. BFC可以解决什么问题？

使用BFC可以解决的问题，起始蛮经常遇到的，例如高度塌陷；同时，可以用来和float结合进行布局

顶部链接是demo展示3种情形：

1. 兄弟元素，设置float后导致元素覆盖，如果被覆盖者是纯文本会出现环绕

2. 父子元素，父元素由于子元素设置float而出现了高度塌陷

3. 父子/兄弟元素，垂直方向两者会出现margin重叠「相互行为」

参考文章：Juejin