BFC块级格式上下文介绍

块级格式上下文(Block formatting context)

什么是BFC?

块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文

BFC是一个容器,在这个容器中的元素不会影响到其他容器的布局,处于不同 BFC 中的元素不会互相干扰。

BFC的触发条件

  • 根元素
  • 浮动元素
  • 绝对定位元素 absolute 或 fixed
  • display为 inline-block 或 table-cell 或 table-caption 或 flex 等。非 block 、inline
  • overflow 的值不为 visible 的元素

其中,最常见的就是 overflow: hiddenfloat: left/rightposition: absolute

BFC的特性

  • 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流);
  • 处于同一个BFC中的元素相互影响,可能会发生margin collapse;
  • 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
  • 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
  • 浮动盒区域不叠加到BFC上;

BFC的作用

阻止兄弟元素间 margin 折叠,复现代码如下:

<p>first</p>
<p>second</p>

<style>
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}
</style>

只要对 p 加个 overflow: hidden 就能解决

防止浮动元素导致父元素高度坍塌,复现代码如下。

<div class="box">
    <div class="float">float</div>
    <div class="float">float</div>
</div>

<style>
.float{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}
</style>

从运行结果可以看出,如果块级元素里面包含着浮动元素会发生高度塌陷。

解决方法就是将它变成一个 BFC,BFC 在计算高度时会自动将浮动元素计算在内。

清除浮动

//利用伪元素清除浮动
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
}
.clearfix {
    *zoom:1; 
}

注意这部分代码的 *zoom: 1 是 IE hack。

posted @ 2020-03-14 18:20  Ever-Lose  阅读(132)  评论(0编辑  收藏  举报