在网页的排版布局中，都会用到float（浮动）来让网页的排版更加自由，突破块级元素独霸一行的特性。但是当我们将这些块级元素进行浮动后，我们会发现这些块级元素已经脱离了原本的文档流，
跳出三界不在五行中了。这会给我们带了很多不必要的麻烦。这时候就需要用到BFC了。博主在刚接触BFC时也对其懵懵懂懂，但本着不懂不能装懂，不懂就要弄懂的原则，参考了网上这种大神对BFC的
解释说明后，在这里分享下自己所理解的BFC，希望对初学者们有些帮助。
那么什么是BFC？
首先，我们需要知道BFC为Block Formatting Context缩写，中文解释为块级格式化上下文。
其次，我们也需要明白BFC不是HTML/CSS里的一个标签元素属性这类，它是一个环境，是一个独立的渲染区域，它规定了内部的块级别的BOX如何布局，且BFC内和BFC外各不相干。
最后，需要条件触发才能生成BFC环境。那么问题又来了，哪些元素会触发生成BFC呢？
1.根元素。
2.当Float属性不为none时。
3.position为absolute或fixed
4.overflow不为visible
看到这里，肯定一大半人也还没能明白，那我们先来看个示例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 100px; height: 100px; background-color: pink; } .div2{ width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="father"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
上面这段代码是很常见的，一个div里面嵌套两个div，显示结果就是两个div锤子排列。当我们需要两个div水平排列时候，我们常常会将div1和div2进行一个浮动。加入如下代码
.div1,.div2{
float:left;
}
这时候两个div便会水平排列。但是这时候你会发现原本包含在一个div里面的两个div已经是独自成块了，没有一个父级元素了，且浮动后的div还会影响到周围其他的布局。这时候
我们就需要用到BFC环境了，我们常常会利用overflow元素的hidden属性来触发BFC。
.div1,.div2{
overflow:hidden;
}
加入上述代码后，原本浮动后脱离文档流的两个div现在又从新回到 .father 的怀抱了。
利用overflow：hidden来触发BFC是博主常常用到的。
今天暂且分享这个常常会遇到的问题，其实BFC作用的地方也还挺多的，其他的待我们下次再详谈。
如有对BFC了解更为全面的，欢迎给博主指正。