BFC块格式化上下文

最新推荐文章于 2023-10-22 20:47:47 发布

keisure

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量200

点赞数

分类专栏： css

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、BFC概念

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

二、如何创建BFC

根元素或其它包含它的元素
浮动元素 (元素的 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 tables, table rows, table bodies, table headers and table footers的默认属性]，或 inline-table )
overflow 值不为 visible 的块元素，
display 值为 flow-root 的元素
contain 值为 layout, content, 或 strict 的元素
弹性元素 (display: flex 或 inline-flex元素的子元素)
网格元素 (display: grid 或 inline-grid 元素的子元素)
多列容器 (元素的 column-count 或 column-width 不为 auto 即视为多列，column-count: 1的元素也属于多列)
即便具有 column-span: all 的元素没有被包裹在一个多列容器中，column-span: all 也始终会创建一个新的格式化上下文。

三、BFC特性

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。Margin collapsing也只发生在属于同一块格式化上下文的块级元素之间。

规范css2.1

四、BFC实践

1. 同一BFC下会出现 Margin collapsing

<style>
div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 100px;
}
</style>
<body>
<div></div>
<div></div>
</body>

同一BFC发生外边距折叠
这里的BFC元素是body，body下的两个div元素发生了外边距塌陷。两个div的间距只有100px，并非预期的200px。如果想实现预期，则需要新构造两个BFC。

<style>
p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 100px;
}
.bfc {
    overflow: hidden;
}
</style>
<body> <!-- body 也是一个BFC-->
<div class="bfc">
    <p></p>
</div>
<div class="bfc">
    <p></p>
</div>
</body>

不属于同一BFC