flex布局
这⾥是修真院前端⼩课堂，每篇分享⽂从
⼋个⽅⾯深度解析前端知识/技能，本篇分享的是：
【 BFC(Block Formatting Context) 及其如何⼯作】
【修真院web⼩课堂】请描述 BFC(Block Formatting Context) 及其如何⼯作
⼤家好，我是IT修真院北京分院第35期的学员郭晨阳，⼀枚正直纯洁善良的前端程序员，今天给⼤家分享⼀下，修真院官⽹css任务15，深度思考中的知识点——请描述 BFC(Block Formatting Context) 及其如何⼯作。
（1）背景介绍：
我们常常说⽂档流的时候其实分为定位流、浮动流和普通流三种。其中普通流就是指BFC中的FC。FC是formatting context的⾸字母缩写，直译过来是格式化上下⽂，它是页⾯中的⼀块渲染区域，有⼀套渲染规则，决定了其⼦元素如何布局，以及和其他元素之间的关系和作⽤。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下⽂，是⽤于布局块级盒⼦的⼀块渲染区域。
（2）知识剖析：
⼀：BFC 是什么
[BFC]是可视化CSS渲染⽹页的⼀部分，它是⼀个区域，块级布局，相互浮动在这个区域发⽣。 ⼀个BFC块区域包含所有⾥⾯的元素，除⼦元素创建了新的BFC。（因为各个BFC是⼀个独⽴的区域，BFC之间相互不影响） 所以：由于html(根元素)是独⽴的BFC，在⾥⾯的浮动，块级布局等才会相互影响，若新创建BFC，则相邻BFC之间的浮动元素，或是其他元素将不会影响。如，相邻两个块级元素的外边距折叠的情况将不会发⽣。
⼆：触发条件
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
三：BFC的作⽤
包含浮动元素(清除浮动)BFC会根据⼦元素的情况⾃适⾼度，这个特性是对⽗元素使⽤overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的 不被浮动元素覆盖 浮动元素会⽆视兄弟元素的存在， 覆盖在兄弟元素的上⾯， 为该兄弟元素创建BFC 后可以阻⽌这种情况的出现
四：BFC规则
内部的Box会在垂直⽅向，⼀个接⼀个地放置。 就是我们平常div⼀⾏⼀⾏块级放置的样式。 Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣重叠。 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。就是元素左margin和包含块左border接触，即使存在浮动也是如此。左浮动就是靠左，右浮动就是靠右， BFC的区域不会与float box重叠。应⽤于两列布局 BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素。反之也如此。上下margin不影响，浮动不覆盖 计算BFC的⾼度时，浮动元素也参与计算。如⽗元素⾼度塌陷，清除浮动。⽗元素⾼度由内部撑开，计算bfc⾼度，内部浮动的⼦元素也参加。
（3）常见问题：
1.外边距折叠（Collapsing Margins）
2.让⼀个没有设置⾼度的容器包含浮动元素
3.阻⽌⽂字环绕
（4）解决⽅案：
使⽤overflow: hidden；触发BFC
（5）编码实战：
盒⼦1
盒⼦2
css
.container { background-color: red; width: 400px; }
p { font-size: 30px; background: yellow; margin: 100px 0; }
下⾯的代码通过使⽤overflow: hidden；新创建⼀个BFC，从⽽实现阻⽌外边距折叠。
（overflow: hidden；本来的含义是：如果盒⼦的内容超出盒⼦，则这部分内容隐藏。）
盒⼦1
盒⼦2
.bfc { overflow: hidden; }
⽆BFC，容器⽆⾼度包含浮动元素会发⽣如下：
<meta chart="UTF-8">
<title>容器⽆⾼度包含浮动元素</title></head><body>
<div class="container">
<p>盒⼦1</p>
<p>盒⼦2</p>
</div></body></html>12345678910111213
css:
.container {
background-color: red;
width: 400px;
outline: 1px dashed red;
margin-top: 10px; }
p {
font-size: 30px;
background: yellow;
margin: 100px;
float: left;
}
可以看到，由于浮动元素是脱离普通⽂档流的，所以.container盒⼦发⽣了塌陷，⾼度变为0。如何阻⽌这种情况发⽣呢，可以给上⾯的代码.container盒⼦添加了⼀条样式overflow: hidden;，解决了容器盒⼦塌陷的问题。
效果图如下：
3.阻⽌⽂字环绕
左图右⽂，⽂字环绕图⽚，效果图：
代码如下：
<meta chart="utf-8">
<title>左图右⽂ - ⽂字环绕图⽚</title></head><body><div class="container">
<div class="pic">
<img src="OddEyes.jpg" alt="超天新龙异⾊眼⾰命龙">
</div>
<div class="text">
超天新龙异⾊眼⾰命龙怪兽效果灵摆特殊召唤 12 星 / ATK: ？ / DEF: ？ / 龙 / 光
←12 【灵摆】 12→
①：⾃⼰不是龙族怪兽不能灵摆召唤。这个效果不会被⽆效化。
②：以⾃⼰墓地1只龙族的融合·同调·超量怪兽为对象才能发动。这张卡破坏，那只怪兽特殊召唤。
【怪兽效果】
这张卡不能通常召唤。⽤从⼿卡的灵摆召唤或者把⾃⼰场上的龙族的融合·同调·超量怪兽各1只解放的场合才能特殊召唤。
①：把这张卡从⼿卡丢弃，⽀付500基本分才能发动。从卡组把1只8星以下的龙族灵摆怪兽加⼊⼿卡。
②：这张卡的攻击⼒·守备⼒上升对⽅基本分⼀半的数值。
③：1回合1次，把基本分⽀付⼀半才能发动。这张卡以外的双⽅的场上·墓地的卡全部回到持有者卡组。12345678910111213141516171819202122232425
css:
.container {
background-color: gainsboro;
width: 500px;
min-height: 400px;
padding: 10px
}
.pic {
float: left;
margin-right: 10px;
}
有时候我们不需要⽂字环绕，就想让⽂字⽼⽼实实待在右边。加⼊.text {
overflow: hidden;
}
效果如下：
（6）拓展思考：
为什么⽤overflow触发⽽不⽤其他的？
因为其他如float,positon等等会影响布局，达不到我们想要的效果
（7）参考⽂献：
参考⼀：深⼊了解BFC
参考⼆：BFC是什么
（8）更多讨论：
Q1：提问⼈：overflow的auto还是visible可以触发bfc?
A1：回答⼈：auto，hidden，scroll可以触发
Q2：提问⼈：利⽤浮动再触发bfc⽤来⼲嘛？
A2：回答⼈：⽤来实现左列定宽，右列⾃适应布局
Q3：提问⼈：什么是IE的haslayout？
A3：回答⼈：hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是⼀个元素要么⾃⼰对⾃⾝内容进⾏组织和尺⼨计算(即可通过width/height来设置⾃⾝的宽⾼)，要么由其containing block来组织和尺⼨计算。⽽IFC（即没有拥有布局）⽽⾔，则是元素⽆法对⾃⾝内容进⾏组织和尺⼨计算，⽽是由⾃⾝内容来决定其尺⼨（即仅能通过line-height设置内容⾏距，通过⾏距来⽀撑元素的⾼度；也⽆法通过width设置元素宽度，仅能由内容来决定⽽已）
（9）鸣谢：
感谢刘仁瑞师兄，此教程是在他们之前技术分享的基础上完善⽽成。
（10）结束语：
今天的分享就到这⾥啦，欢迎⼤家点赞、转发、留⾔、拍砖~
