BFC

BFC：block fomating context

我总有种感觉自己在上总结过这个，最近我老大让我在他们那些技术大牛面前做技术分享，自己耍了个滑，觉得大家js都是大牛级别的，我就讲讲CSS。。
BFC是一个很神奇又很有用的利器，但是大多数前端工程师基本上不会花太多时间去研究，只需要知道我们可以利用BFC来清除浮动，利用BFC来防止margin重叠。其实做业务时，这样就真的够了。
但是，多知道点，没坏处。

---

在理解BFC之前你需要确定自己知不知道包含块的概念，这篇笔记只能假装你知道啦。

• BFC
  block：块级元素，大家都知道，默认不加修饰的情况下块级元素并不会被收缩包裹其内容，其宽会充斥父元素，高度由自身内容撑开。每个块级元素即使设置了宽度，不占满父元素也会自己占据一行，不让其后元素与自己并行。
  fomating context：格式化上下文，拥有一套渲染规则。对内来约束其内块级元素的布局，对外来控制和外部元素的布局。
  误解：需要说明：触发BFC后并不是使得非块级元素像块级元素一样布局，但是确实会给触发BFC区域的元素带来有这样的副作用，而是为触发BFC的元素制定一套规则约束其内块级盒子布局与对外部元素布局的影响。并不是改变自己的display模式。

• BFC规则

• [A] 内部的块级Box会在垂直方向，一个接一个地放置。

• [B] 每个元素的margin box的左边， 与包含块的左边(参考包含块)相接触(不重合)(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• [C] Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

• [D] BFC的区域不会与float box重叠。

• [E] BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。（这里面的不会影响，只在文档流内是不会影响的，脱离文档流后，当忽略）

• [F] 计算BFC的高度时，浮动元素也参与计算

A_{F为BFC的渲染规则，当某个DOM元素被触发BFC后，会使该元素拥有A}F的这些渲染规则。

• 触发BFC的条件
• 根元素
  根元素这个，很好理解。
  html文档建立，就会触发根元素的BFC，我们在根元素内写几个div元素，会发现内部div垂直排列，本身没有兄弟元素，自然满足B、D、E、F这几条规则，内部块级盒子来自同一个BFC(html)，所以相邻margin会重叠，行内盒子横向就不会重叠。
• float属性不为none
  当一个元素被设置为float:left or right,会触发这个元素，生成BFC区域，使他不仅拥有BFC的渲染规则，而且会给自身带来副作用，display:block,但是这个元素不会像行内元素通过设置display:block变为块级元素那样，宽度充满其父元素，而是表现的更像行内块级元素,只会使得行内元素不会收缩包裹其内容.
• position为absolute或fixed
  这个触发器触发生成BFC后，margin重不重叠这个对于他都没有效果，可能定位流和一般的文档流浮动流不属于一个吧，，所以自然会与浮动元素重叠。
• display为inline-block, table-cell
  基本上每一条渲染规则都满足
• overflow不为visible
  这个对于来自不同BFC margin不会重叠这一条来说，不满足，其他都能满足
  overflow:hidden通常是对父元素定义比较有效的。

---

另外一个很神奇的地方就是父子元素的margin也会发生重叠。
这时候只要触发一方的bfc就可以解决父子元素margin重叠这个问题，overflow:hidden还是针对父元素比较有效。
，还有一个对父元素进行border的设置也可以解决父子元素margin重叠的问题。