【前端学习笔记】CSS常见问题之BFC

之前在开发的时候，总会遇到margin塌陷，浮动布局等问题，也知道怎么去解决，但始终不知道其内部原理，后来也是通过网友的一篇文章，点醒了我，下面就分享给大家

一 什么是BFC？

BFC(Block formattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有块级盒子元素参与，它规定了内部的块级盒子元素如何布局，并且与这个区域外部毫不相干。

块级盒子元素：display:block, list-item, table 这些元素会参与BFC布局

Formatting Context：Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

二 BFC的布局规则

1.内部的Box会在垂直方向，一个接一个地放置
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(传说中的margin塌陷)
3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4.BFC的区域不会与float box重叠
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6.计算BFC的高度时，浮动元素也参与计算

如何创建BFC

1.float的值不是none
2.position的值不是static或者relative
4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
5.overflow的值不是visible

三 BFC应用

1.解决margin塌陷问题

html部分

   
1
   
2

css部分

.top{
    margin: 30px;
    width: 150px;
    height: 300px;
    background: lime;
    color: #fff;
}
.bottom{
    margin: 50px;
    width: 150px;
    height: 300px;
    background: rgb(134, 68, 37);
    color: #fff;
}

微信截图_20210501172603.png

此时的上下两个元素间margin为数值大的那个值，即bottom类对应的margin
我们稍加改造一下.bottom的样式 加上display：inline-block(参考如何创建BFC中的第四条)

.bottom{
    margin: 50px;
    width: 150px;
    height: 300px;
    background: rgb(134, 68, 37);
    color: #fff;
    display: inline-block; 
}

image.png

此时会发现，上下两个元素的margin的值为各自的margin值，从而解决了margin塌陷

2.清除浮动

html部分

css部分

.wrap {
    background: lime;
    border: 20px solid linen;
}
.item{
    float: left;
    background: lightsalmon;
    height: 100px;
    width: 150px;
    margin: 10px;
}

image.png

可以看到 父元素没设置高度，子元素设置浮动时，父元素的高度没有被撑开，这时需要清除浮动
我们参考如何设置BFC中的第五条 设置overflow属性auto或者hidden
奇迹出现鸟！

image.png

此外，还可以设置display：inline-block(只不过需要给定父容器宽度)

image.png

3.自适应两列布局

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。(这有些抽象，直接看效果吧)

    
1
    
2

.left{
    width: 150px;
    background: coral;
    color: #fff;
    text-align: center;
    height: 300px;
    float: left;
}
.right{
    background:lightseagreen;
    color: #fff;
    text-align: center;
    height: 500px;
}

image.png

此时当然不是我们期望的结果，所以参考BFC的区域不会与float box重叠
我们单独给right类设置BFC （加上overflow:hidden）

image.png

四 总结

这几个例子都说明了

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

[参考文章]
什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc