前言
关于BFC，很多人可能很熟悉，但有些人可能第一次听说。对于熟悉的人无妨也可以温习一下查缺补漏。对于还不是很了解的人认真阅读完后，应该都能够比较深入的理解BFC这个概念、作用以及用法。希望对大家有所收获。
BFC是什么？
BFC全称为 block formatting context，中文为“块级格式化上下文”。它是一个独立的渲染区域,规定了内部如何进行布局，并且内外部的元素之间互不影响。相对应的还有 IFC， 也就是inline formatting context，中文为“内联格式化上下”。它不是本文的重点，感兴趣的童鞋可以自行查阅了解。
如何形成BFC？
-
<html>根元素 -
float的值不为none -
overflow的值为auto、scroll或hidden -
display的值为table-cell、table-caption和inline-block中的任何一个 -
position的值不为relative和static
其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。
BFC作用有哪些？
- 利用
BFC可以阻止垂直外边距重叠 - 利用
BFC可以清除浮动 - 利用
BFC进行自适应布局 - 利用
BFC可以阻止被浮动元素覆盖
BFC有什么特性？
特性1: BFC中元素会在垂直方向，从顶部开始一个接一个地放置。
image
我们平常说的盒子是由
margin、border、padding、content 组成的，实际上每种类型的四条边定义了一个盒子，如图分别是content box、padding box、border box、margin box，这四种类型的盒子一直存在，即使他们的值为0。而决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。从顶部一个接一个放置可以理解为平时div一行一行块级放置的样式。
特性2: BFC中两相邻元素会发生折叠
元素垂直方向的距离由
margin决定。属于同一个BFC的两个相邻元素的margin会发生叠加
实例代码如下：
<p>ABC</p>
<p>abc</p>
p {
color: #fff;
background: #f66;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
效果图：
image
上面例子中两个P之间的距离本该为100px，然后实际却为50px，主要原因是发生了margin折叠了。如果遇到这种情况，只需要将两个P给其中一个P外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个P的margin重叠。即利用BFC可以阻止垂直外边距重叠。
特性3: BFC中父子之间是margin box与border box左边相接触。
每个元素的
margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
实例代码如下：
<div class="wrap">
<div class="child">ABC</div>
</div>
.child {
color: #fff;
background: #f66;
width: 200px;
line-height: 50px;
text-align:center;
}
.wrap {
float: left;
border: 10px solid #fcc;
margin: 50px;
}
效果图：
image
给子
div加浮动，浮动的结果，如果没有清除浮动的话，父div不会将子div 包裹，但还是在父div的范围之内，子div的两边边接触父div的border box 的两边，除非设置margin来撑开距离，否则一直是这个规则。
特性4: BFC的区域不会与float box叠加。
实例代码如下：
<div class="aside"></div>
<div class="wrap">
<div class="child"></div>
</div>
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.child {
height: 200px;
overflow: hidden; //触发main盒子的BFC
background: #fcc;
}
.wrap {
width: 500px;
}
效果图：
image
上面
aside盒子有一个浮动属性，覆盖了child盒子的内容，child盒子没有清除 aside盒子的浮动。只做了一个动作，就是触发自身的BFC，然后就不再被aside 盒子覆盖了。所以，BFC的区域不会与float box重叠。即利用BFC可以阻止被浮动元素覆盖
特性5: BFC内外元素互不影响
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
实例代码如下：
<div class="main">
<div class="child">ABC</div>
</div>
<div class="wrap">
<p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p>
</div>
.wrap {
height: 200px;
background: #AAA;
}
.main {
float: left;
width: 100px;
height: 100px;
background: #f66;
}
.child {
color: #fff;
padding-left: 200px;
line-height: 50px;
}
效果图：
image
上面例子中，
main盒子形成了BFC,BFC是一个独立的渲染区域里面ABC元素不管如何的位移变化都不会影响到外元素。
特性6: 计算BFC的高度时，浮动元素也参与计算。
实例代码如下：
<div class="wrap">
<div class="child">ABC</div>
<div class="child">abc</div>
</div>
.wrap {
overflow: hidden;
width: 250px;
border: 5px solid #f66;
}
.child {
float: left;
width: 100px;
border: 5px solid #fcc;
line-height: 100px;
}
效果图：
image
上面例子可以看出，为达到清除内部浮动，我们可以触发
wrap生成BFC，即利用BFC来清除浮动。那么wrap在计算高度时，wrap内部的浮动元素child也会参与计算。
最后
如果本文对你有所帮助，欢迎点赞关注！！！大家加油。。
更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！
网友评论