1.Bfc
1、BFC是一個獨立的布局環(huán)境，BFC內(nèi)部的元素布局與外部互不影響；
2、可以通過一些條件觸發(fā)BFC，從而實現(xiàn)布局上的需求或解決一些問題；
3、可以將BFC想象成一個工具，無需探究其定義，只要著重理解其功能（特性）即可。
BFC的觸發(fā)條件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值為inline-block、table-cell、table-caption、flex、inline-flex
5、position值為absolute、fixed
BFC的特性
1、屬于同一個BFC的兩個相鄰容器的上下margin會重疊（重點）
2、計算BFC高度時浮動元素也參于計算（重點）
3、BFC的區(qū)域不會與浮動容器發(fā)生重疊（重點）
4、BFC內(nèi)的容器在垂直方向依次排列
5、元素的margin-left與其包含塊的border-left相接觸
6、BFC是獨立容器，容器內(nèi)部元素不會影響容器外部元素
注：其中1、2、3需重點理解，其特性和功能下面將用代碼逐個演示；
4、5、6為基本現(xiàn)象，按字面意思理解即可，不做重點說明。
2.清除浮動的幾種方式
1.父級添加overflow屬性
2.使用after偽元素清除浮動（推薦使用）
.clearfix:after{/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動方法*/
content: "";
display: block;/*轉(zhuǎn)換為塊級元素*/
height: 0;/*高度為0*/
clear:both;/*清除浮動*/
visibility: hidden;/*隱藏盒子*/
}
3.額外標(biāo)簽法
在父元素內(nèi)，最后一個浮動標(biāo)簽后，新加一個標(biāo)簽，給其設(shè)置clear：both；
.clear{
clear:both;
}
<body>
<div class="father">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">額外標(biāo)簽法</div>
</div>
<div class="footer"></div>
</body>
3.Flex = 1 flex = 0
flex:initial;1;0;auto;none
initial:默認(rèn)值，具體表現(xiàn)為，當(dāng)容器有剩余空間時不增長，當(dāng)容器空間不足時會縮小，尺寸自適應(yīng)內(nèi)容。
0;none:具體表現(xiàn)為元素尺寸不會彈性增大，也不會彈性減小。
0%表示固定尺寸是0，元素不具有彈性，那么，flex:0的元素最終的尺寸為最小寬度。
flex:1、auto都是元素尺寸可以彈性增大，也可以彈性減小
但是設(shè)置為1時會優(yōu)先適應(yīng)div內(nèi)部最小尺寸的元素
設(shè)置為auto時會優(yōu)先適應(yīng)div內(nèi)部最大尺寸的元素
雖然都是充分分配容器內(nèi)容，但是flex：1 的尺寸是較長的尺寸優(yōu)先犧牲自己的尺寸，而flex:auto 中是較長的尺寸優(yōu)先擴展自己的尺寸。
所以，flex:1 更適合在等比例列表時使用，flex：auto適用于元素充分利用剩余空間，比如頭部導(dǎo)航文字多少不一致時使用。
4.Eggs 中間件封裝接口
5.flex 垂直居中
6.Vue React 框架不同點
react整體是函數(shù)式的思想，把組件設(shè)計成純組件，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流。
而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對每一個屬性建立Watcher來監(jiān)聽，當(dāng)屬性變化的時候，響應(yīng)式的更新對應(yīng)的虛擬dom。
