我们可以通俗的理解一下:
BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
BFC有一下特性:
- 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动元素也参与计算。
那么我们该怎么使用BFC呢,如何触发BFC呢?:
- float 除了none以外的值
- overflow 除了visible 以外的值(hidden,auto,scroll )
- display (table-cell,table-caption,inline-block, flex, inline-flex)
- position值为(absolute,fixed)
怎么运用BFC、在哪些场景可以用到BFC:
1、自适应两栏布局
<style>
.a {
width: 100px;
height: 150px;
float: left;
background: white;
border: 1px solid red;
}
.b {
height: 200px;
width: 200px;
background: #fcc;
border: 1px solid blue;
/* overflow: hidden; */
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
页面:![在这里插入图片描述](https://img-blog.csdnimg.cn/b21860d083c54605beb0910582ea231a.png#pic_left
因为 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
显然存在浮动元素a,b元素左边会与body 左边接触;
怎么解决?
我们可以触发b元素的BFC ,形成自适应的左右布局
.b {
height: 200px;
width: 200px;
background: #fcc;
border: 1px solid blue;
overflow: hidden;
}
此时的页面效果:
2、清除内部浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width: 100px;
height: 100px;
float: left;
}
</style>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
此时的页面:
可以看到、两个child元素看起来并没有被包含在 父元素内部
因为BFC规则:计算BFC的高度时,浮动元素也参与计算
解决方法:清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
此时的页面:
3、防止垂直 margin 重叠
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 50px;
text-align: center;
margin: 50px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
此时的页面:
可以看到、上下元素的 margin 发生了重叠 ,因为触发了BFC规则:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
解决办法:我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 50px;
text-align: center;
margin: 50px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
此时的页面: