什么是BFC?
在解释BFC 是什么之前，需要先介绍Box、Formatting Context的概念。
Box: CSS布局的基本单位 元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的Formatting Context，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
-
block-level box:display属性为block,list-item,table的元素，会生成block-level box。并且参与block fomatting context； -
inline-level box:display属性为inline,inline-block,inline-table的元素，会生成inline-level box。并且参与inline formatting context； -
run-in box:css3中的。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的Formatting context有 Block fomatting context(简称BFC)和 Inline formatting context(简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
触发条件或者说哪些元素会生成BFC：
满足下列条件之一就可触发BFC
- 根元素，即
HTML元素 -
float的值不为none -
overflow的值不为visible -
display的值为inline-block、table-cell、table-caption -
position的值为absolute或fixed
BFC布局规则：
- 内部的
Box会在垂直方向，一个接一个地放置。
就是我们平常div一行一行块级放置的样式。 -
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 - 每个元素的
margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 -
BFC的区域不会与float box重叠。 -
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 - 计算
BFC的高度时，浮动元素也参与计算。
BFC布局规则实例：
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
//html文件
<div id="left"></div>
<div id="right"></div>
//css文件
div{
width: 100px;
height: 100px;
}
#left{
background-color: aquamarine;
margin: 100px;
}
#right{
background-color: violet;
margin: 100px;
}
浏览器效果图如下：两个div的margin发生的重叠变成了100ox。
属于同一个BFC的两个相邻Box的margin会发生重叠
此时可以利用BFC阻止margin重叠:
当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
操作方法：给其中一个div外面包一个div，然后通过触发外面这个div的BFC（例如：设置外层div属性为：overflow: hidden;），就可以阻止这两个div的margin重叠。
2.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
//html文件
<div id="total">
<div id="left"></div>
<div id="right"></div>
</div>
#left{
float: left;
width: 100px;
height: 100px;
background-color: aquamarine;
}
#right{
width: 200px;
height: 200px;
background-color: violet;
}
#total{
width: 300px;
height: 200px;
}
浏览器效果图：
每个元素的margin box的左边， 与包含块border box的左边相接触
3.BFC的区域不会与float box重叠。
将上边的例子中加入以下代码：
#right{
overflow: hidden;
}
将右边的Box设置在一个独立的BFC区域中。
浏览器效果图如下：
BFC的区域不会与float box重叠
BFC有哪些作用：
-
自适应两栏布局
-
可以阻止元素被浮动元素覆盖
-
分属于不同的
BFC时可以阻止margin重叠 -
可以包含浮动元素——清除内部浮动
<div id="total"> <div id="left"></div> <div id="right"></div> </div>#left{ float: left; width: 100px; height: 100px; background-color: aquamarine; } #right{ float: left; width: 100px; height: 100px; background-color: violet; } #total{ border: 5px solid blueviolet; width: 300px; }浏览器效果图如下：
没用BFC时的效果
解析：给这两个子
div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将下面两个div包裹，但还是在父div的范围之内，左浮是子div的左边接触父div的border box的左边，右浮是子div接触父div的border box右边，除非设置margin来撑开距离，否则一直是这个规则。利用BFC清除内部浮动
在CSS文件中加入以下代码：#total{ overflow: hidden; }此时浏览器效果如下：
可以包含浮动元素——清除内部浮动
网友评论