标签：pos flex css ack 绝对定位 splay lex display 情况
前段面试总会考察这么个知识点，就是BFC，我自己也经常懵逼，这是个啥呀，完全不知道，但是呢，其实这就是个简写的概念，名字比较唬人而已，今天，我们就来深入研究下，揭开它的伪装。
bfc=> block formating context 块级格式化上下文
这个名字让你很迷惑，是不是，其实用通俗的语言来说的话，就是建立一个与外界毫不相干的盒子，不受外界影响，也不影响外界。
比如，1，我们经常碰到的，两个盒子按顺序从上到下排列，比如A，B，两个都设置的外面局margin:20px;
此时，A,B之间的间隙就不是我们理解的40px，而是依然是20px，这就是css里面的边距重叠，会以较大的边距为准，而不会叠加
2，子元素浮动，父元素高度塌陷，
<div class="father">
<div class="d3">
</div>
<div class="d4"></div>
</div>
样式：
.father {
background-color: yellow;
padding: 10px;
/* float: left; */
/* overflow: scroll; */
/* display: inline-block; */
/* position: absolute; */
display: flex;
/* 解决盒子高度塌陷的问题，就需要使用到bfc,正好，1,给元素设置浮动就能形成bfc
通过别人的总结，主要是6大类情况会形成bfc
1,overfollow不会visible
2,浮动元素
3，绝对定位以及固定定位元素
4,设置为行内块的元素 也就是inline-block
5，设置为flex以及grid的元素
*/
/* overflow: visible; */
}
.d3,d4 {
padding: 10px;
width: 100px;
height: 100px;
background-color: red;
float: left;
}
总结一下，其实在真实的开发中你或多或少都解决过这些问题，只是呢，你没意思到这是bfc的应用，就像现在用的非常多的flex布局，是吧，
一般如果面试中问到的话，可以说下下面产生bfc的几种属性
1，浮动元素
2，绝对定位和固定定位元素
3，overfollow不会visible的元素 这个visible就是默认值
4，行内块元素，也就是inline-block
5，flex以及grid的元素及其子元素。
前端深似海，结果还喜欢搞一些概念来迷惑大家，借用一句话来形容就是，你这糟老头子，坏的很。
标签：pos flex css ack 绝对定位 splay lex display 情况
原文地址：https://www.cnblogs.com/ysla/p/14019708.html
