BFC 格式化上下文

BFC

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

BFC的布局规则如下：

1、内部的盒子会在垂直方向，一个一个地放置
2、BFC是页面上的一个隔离的独立容器
3、属于同一个BFC的两个相邻Box的上下margin会发生重叠
4、计算BFC的高度时，浮动元素也要参与计算
5、每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
6、BFC的区域不会与float重叠

创建了BFC的元素中的所有内容都会被包含在该BFC中。

BFC对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在他前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

创建BFC

下列方式会创建BFC：

根元素或包含根元素的元素，即body根元素
浮动元素，即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、row、tbody、thead、tfoot的默认属性）或inline-table)
overflow的值不为visible的元素
display值为flow-root`的元素 (就是说使用这个属性之后，该元素会生成一个块级容器框，并且使用的是流布局。为里面内容创建新的块级格式化上下文。)
contain值为layout、content或strict`的元素
弹性元素(display为flex或inline-flex元素的直接子元素)
网格元素(display为grid或inline-grid元素的直接子元素)
多列容器（元素的colunm-count或column-width不为auto，包括column-count为1）
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器当中

BFC特性与应用

两个相邻的普通流中的块元素垂直方向的margin会发生折叠

<style>
.p{
height: 50px;
width: 200px;
margin: 50px 0;
background: tomato;
}
</style>
</head>

<body>
<h1>1.两个相邻的普通流中的块元素垂直方向上的margin会折叠</h1>
<div class="p"></div>
<div class="p"></div>
</body>

之所以会发生这样的情况是因为根据BFC布局规则中所述，位于同一个BFC中的相邻两个盒子之间的上下margin会发生折叠。
如果我们想阻止这种情况发生，很容易想到只要让两者位于不同的BFC当中就可以做到了，比如：

<style>
.p{
height: 50px;
width: 200px;
margin: 50px 0;
background: tomato;
}
.wrap{
overflow: hidden;
}
</style>
</head>

<body>
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
</body>

BFC可以包含浮动的元素
我们都知道在正常的情况下，浮动元素会脱离普通文档流，所以会有下面的代码

<div style="border:1px solid #000000">
<div style="width:100px;height:100px;background-color:gray;float: left;"></div>
</div>

会导致父元素塌陷这样的效果：

外面的div无法包含内部的div，但是如果我们触发外部容器的BFC，根据BFC布局规则，计算BFC高度时，浮动元素也要参与在内，那么外部容器将会包裹着浮动元素，通过这样的方式达到阻止父元素塌陷的效果。我们用最简单的触发BFC的方式，将容器元素的overflow属性值设为非visible。

<div style="border:1px solid #000000;overflow:hidden;">
<div style="width:100px;height:100px;background-color:gray;float: left;"></div>
</div>

效果图如下：

BFC阻止元素被浮动元素覆盖
如果有这么一段代码：

<div style="width:100px;height:100px;background:#000;float: left;"></div>
<div style="width:400px;height:300px;background:sandybrown;"></div>

之所以会这样是因为BFC布局规则规定，每个元素的左边与包含的盒子的左边相接处，即使存在浮动也是如此。为了防止这种情况发生，同样我们可以通过触发BFC来完成：

<div style="width:100px;height:100px;background:#000;float: left;"></div>
<div style="width:400px;height:300px;background:sandybrown;overflow:hidden;"></div>

当然别的触发BFC的方式也能达到同样的效果。
————————————————
版权声明：本文为CSDN博主「白日梦先生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_32422537/article/details/79760786

个人总结重点

BFC块级格式化上下文布局规则重点，

BFC是页面上一个隔离的独立容器

计算BFC高度时，浮动元素也要参与计算，每个元素的左边与包含盒子的左边相接触，存在浮动也是如此。

BFC区域不会与float重叠创建了BFC元素中的所有内容都会包含在该BFC中，浮动定位和清楚浮动都只会应用到同一个BFC中的元素

外边距折叠也只会发生在属于同一BFC块级元素之间

创建BFC几个重点：1、body 2、浮动元素，或者绝对定位，相对定位元素 3、行内块元素（所以父元素浮动能管住子元素浮动） 4、display:table-cell 5、display：table-caption 6、overflow不为none的元素，也就是为什么overflow：hidden能清除浮动的原因 7、弹性元素 display：flex display:inline-flex

BFC特性应用

BFC可以阻止元素被浮动元素覆盖给元素填上BFC overflow:hidden

防止margin折叠，让两者位于不同BFC中

posted @ 2020-05-20 00:12 Ren小白阅读(134) 评论(0) 收藏举报

刷新页面返回顶部

Ren小白

BFC 格式化上下文

BFC

BFC的布局规则如下：

创建BFC

BFC特性与应用

个人总结重点

公告