前言：在我们学习css的时候会遇到一个概念：BFC，这个知识点经常会在面试中被问到，很多人都回答的模棱两可，那么我们今天来探讨一下究竟什么是BFC，它的原理以及他的应用场景，在学习此篇文章前你要知道的知识有定位、盒模型、float、常规流（流式布局）～
BFC（Block Formatting Context），即块格式化上下文，什么时候会用到呢？
比如，解决子元素设置margin-top时，导致父元素向下移动
.box{//父级盒子
width: 300px;
height: 300px;
background: pink;
}
.content{//子级盒子
width: 100px;
height: 100px;
background: blue;
margin-top:30px;//设置了margin-top
}
效果如下：
效果图.png
图中，红色框就是设置的margin-top的高度，解决方案是 在父级元素上加overflow:hidden属性
效果如下：
效果图.png
你可能想不到的是，此时我们已经创建了一个BFC了！
BFC的创建方法：(满足下列的任意一个或多个条件即可)
1、浮动 (元素的float不为none)；
2、绝对定位元素 (元素的position为absolute或fixed)；
3、行内块inline-blocks(元素的 display: inline-block)；
4、表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
5、overflow的值不为visible的元素；
6、弹性盒 flex boxes (元素的display: flex或inline-flex)；
我们在布局中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。想来竟如此简单～
BFC实际中的作用
自适应布局、清除浮动、防止margin重叠
作者的理解是 -----当我们在布局中使用了margin(可能会导致边距重叠)、position(绝对和固定定位导致元素脱离我们的布局)、float(会脱离文档流)，以上的情况导致了接下来的布局可能位置会不对，会乱跑哒、会重叠哒～所以，我们使用BFC的一些方法，让那些已经脱离文档流的元素在一个个独立的小盒子里，不会影响其他盒子的布局。
看完此篇文章，希望能帮助你理解BFC哦～祝学习工作顺利
网友评论