什么是BFC？
Posted caozhuzi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了什么是BFC？相关的知识，希望对你有一定的参考价值。
Block Formatting Contexts 即块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box（display 属性为 block, list-item, table 的元素）如何布局，并且与这个区域外部毫不相干。其中 Formatting Context 是一个决定如何渲染文档的容器，Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。
通俗点说，BFC就是一个独立的盒子，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
在文档呈现开始的时候，会自动创建一个BFC来对整个页面进行布局，在没有创建一个新的BFC的时候，整个文档就这一个BFC。
BFC的规则
-
内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子可以看出）
-
同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠
-
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
-
BFC的区域不会与float box重叠
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
-
计算BFC的高度时，浮动元素也参与计算
触发BFC
-
根元素
-
float属性不为none（如：left | right）
-
overflow的值不为visible（如：hidden | auto | scroll）
-
display属性值为inline-block | flex | inline-flex | table-cell | table-caption
-
position为absolute或fixed
应用BFC
解决margin叠加问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
. overflow
overflow: hidden;
.div-one
margin-bottom:20px;
background: red;
.div-two
margin-top:10px;
background: blue;
</style>
<div class="overflow">
<div class="div-one">
abc
</div>
</div>
<div class="overflow">
<div class="div-two">
def
</div>
</div>
</body>
</html>
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
清除内部浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC清除内部浮动</title>
<style type="text/css">
.child background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;
.parent width: 300px; border: 1px solid #95E1D3;float:left;
/*.parent或者不用float:left;用overflow：hidden;*/
</style>
</head>
<body>
<div class="parent">
<div class="child">11</div>
<div class="child">22</div>
</div>
</body>
</html>
3.一个浮动，一个不浮动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 400px; border: 1px solid #95E1D3;">
<div style="background-color: blue; border: 1px solid #FCE38A; width: 100px; height: 100px;float:left;">11</div>
<div style="background-color: red; border: 1px solid #FCE38A; width: 200px; height: 100px;overflow: hidden;">22</div>
<!--给上面这个div 加个overflow:hidden;使它成为一个bfc。-->
</div>
</body>
</html>
仅供参考。
以上是关于什么是BFC？的主要内容，如果未能解决你的问题，请参考以下文章