BFC
1 定義:
BFC - Block Formatting Context 塊級(jí)格式化上下文 BFC的定義，在官方文檔到中是這么介紹的：一個(gè)BFC區(qū)域包含創(chuàng)建該上下文元素的所有子元素，但是不包括創(chuàng)建了新的BFC的子元素的內(nèi)部元素，BFC是一塊塊獨(dú)立的渲染區(qū)域，可以將BFC看成是元素的一種屬性，擁有了這種屬性的元素就會(huì)使他的子元素與世隔絕，不會(huì)影響到外部其他元素
2 觸發(fā)方式:
a. body根元素
b. 設(shè)置定位: absolute 或者fixed;
c. 行內(nèi)塊顯示模式, inline-block;
d. 設(shè)置overflow: hidden,auto,scroll;
e. 表格單元格, table-cell;
f. 彈性布局,flex;
3 作用:
a. 解決外邊距的塌陷問題(垂直塌陷)
b. 利用BFC解決包含塌陷
c. 清除浮動(dòng)
d. BFC可以阻止標(biāo)準(zhǔn)流元素被浮動(dòng)元素覆蓋
BEM
1 定義:
BEM就是塊（block）、元素（element）、修飾符（modifier），是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法可以使css類對(duì)其他開發(fā)者來說更加透明且具有意義。BEM約定更加嚴(yán)格，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)較大的項(xiàng)目。
BEM的關(guān)鍵是光憑名字就可以告訴其他開發(fā)者某個(gè)標(biāo)記是用來干什么的。通過瀏覽HTML代碼中的class屬性，就能夠明白模塊之間是如何關(guān)聯(lián)的，有一些僅僅是組件，有一些則是這些組件的子孫或者是元素，還有一些是組件的其他形態(tài)或者是修飾符。
