千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

P100 BFC

笔记心得体悟

在学习了浠浠老师的关于BFC讲解的介绍后，让我对BFC的概念和规则有了一个很深的理解，下面就让我来对其进行一个总结：

一、首先，我们得理解何为bfc?

bfc是全称（Block Formatting Content）英文的缩写，中文意思的块级格式化上下文，这是只有块级元素才能参与的格式化上下文。

二、其次我们要知道使用bfc的原因

当我们在书写css样式的过程中会遇到上下相邻块元素的垂直边距合并或者嵌套块元素的垂直边距合并以及外边距溢出的问题 ，使用bfc可以解决这一问题

三、接下来，我们得了解bfc的使用规则

bfc区域与外界毫不相关，bfc区域之间互相独立不受影响，浏览器计算高度时会计算bfc区域里浮动元素的高度，解决了高度自适应时高度塌陷的问题，并且bfc区域不和浮动元素相重叠。

四、最后我们要了解该如何触发bfc规则

1.给元素添加display:inline-block/fixed/inline-flex

2.给元素添加浮动float:left/right

3.overflow:hidden/scoll/auto

4.给元素添加定位position:absolute/fixed

由此可见BFC是一个很好的解决方案。但BFC也有缺陷，BFC 可能会导致布局问题。例如，当一个元素被包含在一个 BFC 中时，它可能会被迫变窄以避免与浮动元素重叠。这可能会导致布局问题，尤其是当 BFC 中的元素需要占据特定的宽度时；BFC 可能会导致内容溢出。由于 BFC 中的元素不会影响外部元素，因此如果 BFC 中的内容过长，它可能会溢出容器而不会影响外部布局。这可能会导致内容被截断或者不可见。