css规范 BFC

 1.BFC的概念

BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

2.BFC布局规则

1. 在BFC下，内部的Box会在垂直方向，一个接一个地放置。 2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box 的margin会发生重叠 3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。 4. BFC的区域不会与float box重叠。 5. 计算BFC的高度时，浮动元素也参与计算

3.如何触发 BFC

.浮动元素，float 除 none 以外的值 .绝对定位元素，position（absolute，fixed） .display 为以下其中之一的值inline-block, table-cell, table-caption, flex, inline-flex .overflow 除了 visible 以外的值（hidden，auto，scroll）