Bfc的理解

最近学习css以前也没怎么好好学习，所以就是知道一些最基本的知识点，也不知道为什么这样写。接下来写的也就是看到的知识点的理解吧。

BFC就是块级格式化上下文，英文就是Block Formatting context,很好理解，其实学习去看英文的博客是蛮好的，作为技术人员，看英文是必须的，本人英文一般，学英文到现在也就阅读理解能看的过去，所以英文也会看看，想想google不能搜了就懒了，很少去看英文的博客了。

回归正题，bfc，英文参考：自己去找吧。中文参考：http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

很好的一个网站，学习不错。

什么是BFC（Block formatting contexts）

w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

上面就说得很清楚，好好看仔细了。

中文参考的地方有一个不错的例子：如下：

首先我们给出这样的结构：

//CSS
.box {210px;border: 1px solid #000;float: left;}
.img { 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
//HTML
<div class="box">
    <div class="img">image</div>
    <p class="info">信息信息信息信息信息信息信息信息信息信息信息信</p>
</div>

一般情况下它呈现出我们所乐意看到的样子：

但随着文字信息增多后，会变地非常的糟糕：

很明显，这是因为info类里面的文字受到了浮动元素的影响，但这并不是我们所期望的。此时我们可以为P元素的内容建立一个BFC，让其内容消除对外界浮动元素的影响。根据上文所知，只要给info元素添加overflow:hidden;即可为其内容建立新的BFC。当然你也可以通过其他方法来建立。其效果如下：

看到这里我就明白了bfc的基本了。不就是一些css属性我们去用符合了bfc的定义，那么它就说bfc了，而bfc是一个盒子，从上而下的垂直的排列。块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。如此简单，我就明白了，于是我想到了float：right的时候，网站中经常看到右边用到这个，就把它定义了，一行垂直的右部排列。

现在来讨论BFC中的折叠问题，这是个头疼的问题。

折叠的结果：

1.  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.  两个外边距一正一负时，折叠结果是两者的相加的和。

这样子看看是简单，我一下懂了。但是接下来就头疼了：

产生折叠的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

•  必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
•  没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
•  都属于垂直方向上相邻的外边距，可以是下面任意一种情况
  •  元素的margin-top与其第一个常规文档流的子元素的margin-top
  •  元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
  •  height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
  •  高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

上面说了这么多不就是一个字相邻而已，就这么些情况记住难呀。现在记住过会忘了正常，所以还是要理解，那么就慢慢积累经验了。

那么我们开始讨论：

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

这句话的意义蛮大了，好好想想。打个比方说就是，如果有两个div，一个在外一个之内，里面的margin设定了30那么，根据定义去判断，到外面的div的border的距离是多少，这里的距离是里面div的border到外面div的border的距离是多少？为什么要从左边开始，那是因为上下左右的规则，那么上下呢？这里上下是不影响的。所以就是左右，定义里面没有说上下的定义，只有左右。那么开始了，上下没影响不管，左边开始，既然是30那么我们应该根据定义先满足左边的30吧，于是左边满足了，正好碰触到外边的border了，那么接下来是右边了，一样的原则，看看是否满足，如果满足一样是碰触到外边的border，不满足，有两种情况一种是大于一种是小于，咋办？难道有分情况，大于小于，oh，no不是的应该好好看定义哦，没有说分情况，好吧，那咋办？可以自己去体验一把，结果是不管大于还是小于，都没有满足碰触到外边的border的情况就是把外边的border当做成里面的border那么margin的大小是多少外边距就是多少。例子自己去尝试理解：实际上也就是里边的div的border移动外面div的border的位置上了，开始设置margin了。很好理解的一点，所以说好好看文档和自己去尝试写写理解一下。

body {padding:0;margin: 0; text-align: center;}
.wrapper {margin:30px; 450px;border:1px solid red;}
.small-box { 50px;height: 50px;margin: 10px;background: #9cc;}
.middle-box { 100px;height: 100px;margin: 20px;background: #99c;}
.big-box { 120px;height: 120px;margin: 20px;background: #33e;}
.floatL {float: left;}
.floatR {float: right;}
.clear {clear: both;}
.posA {position: absolute;}
.overHid{overflow: hidden;}
.red {background: #f00;}
.green {background: #0f0;}
.blue {background: #00f;}
//HTML
<div class="wrapper overHid">
    <div class="big-box blue">non-float</div>
    <div class="middle-box green floatL">
        <div class="small-box red"></div>
        float left
    </div>
</div>
一些详细的说明看中文说明。结束了如有不对的地方请指出，我也是按照别人的博客去总结的，自己学的时候不认识，现在就是少壮不努力，老大徒伤悲了。不说了，很晚了睡觉。

它的左右边缘就是