我对BFC的一些认知我对BFC的一些认知

BFC 【我对BFC的一些认知】BFC(Block Formatting Context)，块级格式上下文。
What is BFC ? BFC 是一块渲染的区域。在这之前，有一块区域叫做 FC 它是默认浏览器支持的渲染区域。
FC：浏览器默认支持的多个盒子之前的排列规则。
BFC：区别于默认浏览器的多个盒子之间的排列规则。
默认 FC 规则我们先举例，什么是默认的 FC 规则，这样的规则有什么坏处。
外边距塌陷
垂直方向上，当我们设置两个盒子之间都有margin的时候：

#green { margin:10px 10px 10px 10px; } #blue { margin:20px 10px 20px 10px; } #red { margin:30px 10px 30px 10px; }

文章图片
上下外边距塌陷.png 这与我们想要达到的效果不一致，默认BF盒子排列规则：
两个盒子之间的距离是：(上方盒子的marginBottom + 下方盒子的magrinTop) / 2
浮动子元素父元素的宽高丢失
我们再看一个默认 BF 规则，当同时 float 多个元素的时候。

#green { margin:10px 10px 10px 10px; float: left; } #blue { margin:10px 10px 10px 10px; float: left; } #red { margin:10px 10px 10px 10px; float: left; }

文章图片
子元素浮动父元素失去宽高.png 当我们查看 DIV#Container 他的宽度为 0，父元素的宽度和高度都已经丢失了；
我们常见的方式是用清除浮动来解决，当然，我们也可以采用生成BFC的方式解决。
浮动元素与非浮动元素重叠
当在父元素之内，有两个兄弟元素，一个元素浮动，另一个元素不浮动，就会产生一种状况:

#Container { width: 500px; }#green { float: left; }

你能够很明显地看到，两个兄弟元素发生了堆叠，应该如何解决呢？

文章图片
浮动子元素覆盖兄弟元素.png 我们常用的方式是，将 DIV#blue 也设置为向左浮动，然后用父元素清除浮动；
这样就能够保证父元素的宽度不会丢失，两个元素也不会发生堆叠，另外BFC可以解决这个问题。
使用 BFC 解决以上问题 BFC 的规则就是为了解决 BF 遗留下来的问题，当兄弟盒子上下或左右排列时产生的问题。
生成一个 BFC 规则盒子

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、- table-header-group、table-footer-group（分别是HTML table、row、tbody、- thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

此规则来源于：块格式化上下文 - Web开发者指南 | MDN；
我们无法记住这么多内容，当我们遇到上面的几个问题时，查看BFC文档，然后就可以解决。
解决：外边距塌陷
这里我们采用

overflow: hidden;

来解决这样的问题。

#green { margin:10px 10px 10px 10px; }#blueBox { overflow: hidden; }#blue { margin:20px 10px 20px 10px; } #red { margin:30px 10px 30px 10px; }

第一步：我们给 #blue 盒子，添加了一个 #blueBox 的盒子包裹；
第二步：我们将 #blueBox 的盒子，使用

overflow: hidden;

，触发BFC渲染。
第三步；解决外边距塌陷的问题。

文章图片
解决：外边距塌陷.png 解决：浮动子元素父元素的宽高丢失
这里我们采用

overflow: hidden;

来解决这样的问题。

#Container { overflow: hidden; }#green { margin:10px 10px 10px 10px; float: left; } #blue { margin:10px 10px 10px 10px; float: left; } #red { margin:10px 10px 10px 10px; float: left; }

第一步：我们将父元素 DIV#Container 设置为

overflow: hidden;

生成BFC的排列规则。
第二步：DIV#Container就是一个拥有BFC规则的盒子。

文章图片
解决：父元素失去宽高解决：浮动元素与非浮动元素重叠
这里我们采用

overflow: hidden;

来解决这样的问题。

#Container { width: 500px; }#green { float: left; }#blue { overflow: hidden; }

我们设置 DIV#blue 元素为

overflow: hidden;

，它就成为了一个拥有BFC规则的盒子。

文章图片
极倔：浮动子元素覆盖兄弟元素实战：利用BFC完成一份流式网格布局
我们经常会使用 boostrap 等网格系统；
在这里，我根据 skeleton.css 改编，简单完成一份这样的布局结构。
从而，是我们更加深刻地理解，BFC在实际场景中的应用。

浮动的栅格化布局 ONE ELEVENTWO TENTHREE NINEFOUR EIGHTFIVE SEVENSIX SIXSEVEN FIVEEIGHT FOURNINE THREETEN TWOELEVEN ONE

这是基本的页面结构，我们将整体划为12份，根 bootstrap.css 的思维一致。

body { font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; }.Container { position: relative; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; /* 触发 BFC 规则，避免子元素浮动后的父元素失去宽和高 */ }.row { overflow: hidden; /* 触发 BFC 规则，避免子元素浮动后的父元素失去宽和高 */ }.column, .columns { width: 100%; float: left; /* 触发 BFC 规则 */ box-sizing: border-box; font-weight: 400; letter-spacing: .1rem; margin-bottom: 1%; background-color: #CCC; height: 30px; line-height: 30px; text-align: center; border-radius: 5px; }.column:first-child, .columns:first-child { margin-right: 4%; }.one.column, .one.columns{ width: 4.66666666667%; } .two.columns{ width: 13.3333333333%; } .three.columns{ width: 22%; } .four.columns{ width: 30.6666666667%; } .five.columns{ width: 39.3333333333%; } .six.columns{ width: 48%; } .seven.columns{ width: 56.6666666667%; } .eight.columns{ width: 65.3333333333%; } .nine.columns{ width: 74.0%; } .ten.columns{ width: 82.6666666667%; } .eleven.columns{ width: 91.3333333333%; } .twelve.columns{ width: 100%; margin-left: 0; }.one-third.column{ width: 30.6666666667%; } .two-thirds.column{ width: 65.3333333333%; }