下面开头依然是老生常谈，虽然网络上这些话术都已经烂大街，但是开头还是要引入一下。
1、什么是BFC？
BFC（块级格式化上下文，Block Formatting Context）是一个独立的布局环境，其中块级元素按照它的规则进行布局和渲染。BFC的存在有助于解决一些常见的布局问题，尤其是在处理浮动元素、边距折叠和清除浮动时。
2、如何创建BFC？下面是一些常见的创建BFC的方式
- 文档的根元素（
<html>）。 - 浮动元素（即 float 值不为
none的元素）。 - 绝对定位元素（position 值为
absolute或fixed的元素）。 - 行内块元素（display 值为
inline-block的元素） - overflow 值不为
visible或clip的块级元素。 - display 值为
flow-root的元素。 - contain 值为
layout、content或paint的元素。
3、BFC有什么作用？下面是几个常见的作用
边距折叠：BFC可以防止垂直相邻的外边距发生折叠（两者边距取大者），确保元素之间的边距按预期进行布局，而不会出现不希望的间距问题。
高度塌陷：通过在一个容器上创建BFC，容器的高度将根据浮动元素的高度来自动调整，但容器内部的元素仍然保持浮动状态，解决浮动元素造成的布局问题，而不需要添加额外的空元素或使用伪元素。
包含塌陷：外边距合并是一种 CSS 布局行为，当相邻的垂直外边距相遇时，它们会合并为一个外边距，通常取其中较大的外边距值。这就是为什么有时候给子元素添加外边距会影响到父元素的高度或位置。给子元素l另外增加一个父级BFC可以阻止或控制外边距合并，以确保元素之间的外边距按照预期的方式生效。
---------------------------------------------------------------------------------------------------------------------------------
划重点！！！
为什么BFC能达到上面所说的这个效果，大家可能没有去深究这个问题，觉得他就是这样的，理所当然的，是这样的吗？当然不是！
以下是官方文档规定
1、在BFC中，块级元素一个接一个的排列下来。也就是说，我们熟知的块级元素排列方式是在BFC根元素html下的作用下的产生的。
2、元素间距margin也是由BFC解析产生的效果，规定在同一个BFC中相邻两个元素的上下margin重叠则取较大值进行渲染。这就是为什么会产生边距折叠，解决办法就是让其中一个元素放在另外一个BFC中。
3、规定如果BFC的高度是auto（默认）的情况下，如果内部有绝对定位元素，父元素高度将被忽略；如果有浮动元素，那么会增加高度以包活这些浮动元素的下边缘。这也是为什么给容器加一个BFC能解决浮动元素造成的高度塌陷问题。
9465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
