CSS中的块格式化上下文---BFC

lonelysaber

已于 2022-10-01 11:14:06 修改

阅读量110

点赞数 1

文章标签： html

于 2022-07-23 09:51:03 首次发布

本文链接：https://blog.csdn.net/djwhwj/article/details/125799341

版权

BFC的定义

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

根元素（<html>）
浮动元素（float值不为 none）
绝对定位元素（position值为 absolute 或 fixed）
行内块元素（display值为 inline-block）
表格单元格（display值为 table-cell，HTML 表格单元格默认值）
表格标题（display值为 table-caption，HTML 表格标题默认值）
匿名表格单元格元素（display值为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、tr、tbody、thead、tfoot 的默认值）或 inline-table）
overflow值不为 visible、clip 的块元素
display值为 flow-root 的元素
contain值为 layout、content 或 paint 的元素
弹性元素（display值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
多列容器（column-count或 column-width值不为 auto，包括column-count 为 1）
column-span 值为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)

总结：常见创建方式：

1.清除浮动

浮动元素由于脱离文档流，不会影响父元素的高度，导致父元素塌陷，影响整体布局

.parent{
    border: 1px solid green;
    width: 400px;
}
.child{
   float: left;
   width: 200px;
   height:100px;
   border: 1px solid red;
}

<div class='parent'>
    <p>父容器，我塌陷了</p>
    <div class='child'>子容器，我浮动了</div>
</div>

这个时候就可以给父元素创建BFC，包裹浮动元素，这样就不会影响到父元素外部的布局，达到了BFC的出现的意义啦。

可以为父元素设置一个不为visible的overflow，比如overflow:hidden,

或者display:flow-root。

2.外边距合并问题

当两个垂直的外边距相遇，它们会互相合并为一个外边距，取两者之间的最大值(如果都是负数，则取绝对值的最大值)。

感觉好像没啥用，但是它出现肯定是有意义的。

举个例子：当一串连续的段落在页面内排列，相邻的段落之间的距离是下外边距加上外边距，这个和会远远大于第一个段落的上外边距，看起来非常不协调。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

如果你不想外边距合并，这个时候就可以使用BFC，BFC可以看作一个不影响外部的容器，既然不影响外部，那外边距就不会合并了。

BFC可以看作一个与外界隔离的容器，包裹住内部元素，不影响外部元素。

关注