BFC 及触发条件
2018-04-24 本文已影响0人
半斋
BFC：Block Format Context
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
块级格式化上下文
BFC是一个独立的布局单元
即这个元素的布局不会影响到其它的元素（这个元素的内容不会超到外面去，不影响其它的元素）
想象：这个元素及其子元素在单独的iframe里面/浏览器窗口去布局
这意味着BFC元素一定是方形的，其他元素进不来，内部元素也出不去
触发BFC条件：
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<section>
<div class="out">
<div class="in"></div>
</div>
</section>
</body>
</html>
body{
background-color:#777;
}
section{
width:300px;
height:100px;
background-color:#eee;
margin:50px;
xborder:2px solid balck;
xoverflow:auto;
xdisplay:inline-block;
}
.out{
width:200px;
height:100px;
background-color:#06F;
margin:50px;
xborder:2px solid red;
xoverflow:auto;
xfloat:left;
xdisplay:inline-block;
xposition:absolute;
}
.in {
width:100px;
height:100px;
background-color:#f60;
margin:20px 30px;
xborder:10px solid green;
xoverflow:auto;
xdisplay:inline-block;
xposition:absolute;
}
下列方式会创建块格式化上下文：
- 根元素或包含根元素的元素
- 浮动元素（元素的
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](https://drafts.csswg.org/css-display/#valdef-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的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。
