初识BFC

　　在网页的排版布局中，都会用到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>

View Code

　　上面这段代码是很常见的，一个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了解更为全面的，欢迎给博主指正。