BEM 和 BFC

BFC

1 定义:

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中是这么介绍的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

2 触发方式:

a. body根元素
b. 设置定位: absolute 或者fixed;
c. 行内块显示模式, inline-block;
d. 设置overflow: hidden,auto,scroll;
e. 表格单元格, table-cell;
f. 弹性布局,flex;

3 作用:

a. 解决外边距的塌陷问题(垂直塌陷)
b. 利用BFC解决包含塌陷
c. 清除浮动
d. BFC可以阻止标准流元素被浮动元素覆盖

BEM

1 定义:

BEM就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法可以使css类对其他开发者来说更加透明且具有意义。BEM约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时较大的项目。

BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性，就能够明白模块之间是如何关联的，有一些仅仅是组件，有一些则是这些组件的子孙或者是元素，还有一些是组件的其他形态或者是修饰符。

参考

前端css命名规范----BEM
BEM——前端命名规范介绍