1 .bfc的含義 ：
block formatting contexts（bfc） 塊級元素格式化上下文
它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互關係
塊級元素：父級（是乙個塊元素）
內容：子元素（是乙個塊元素）
其他元素：與內容同級別的兄弟元素
相互作用：bfc裡的元素與外面的元素不會發生影響
2.觸發條件 ：
觸發bfc的方式（一下任意一條就可以）
1.float的值不為none
2.overflow的值不為visible
3.display的值為table-cell、tabble-caption和inline-block之一
4.position的值不為static或則releative中的任何乙個
3.fbc布局與普通文件流布局區別
普通文件流布局規則
1.浮動的元素是不會被父級計算高度
2.非浮動元素會覆蓋浮動元素的位置
3.margin會傳遞給父級
4.兩個相鄰元素上下margin會重疊
bfc布局規則
1.浮動的元素會被父級計算高度（父級觸發了bfc）
2.非浮動元素不會覆蓋浮動元素位置（非浮動元素觸發了bfc）
3.margin不會傳遞給父級（父級觸發了bfc）
4.兩個相鄰元素上下margin會重疊（給其中乙個元素增加乙個父級，然後讓他的父級觸發bfc）
style="
border
:1px
solid
#f00;overflow:hidden;
">
style="
width
:100px
;height
:100px
;background
:green
;float
:left;"
>
kaivon
style="
border
:1px
solid
#f00;margin-top:100px;
">
style="
width
:100px
;height
:100px
;background
:green
;float
:left;"
>
kaivon1
style="
width
:100px
;height
:100px
;background
:red
;overflow
:hidden;"
>
kaivon2
style="
background
:blue
;margin
-top
:100px
;overflow
:hidden;"
>
style="
width
:100px
;height
:100px
;background
:green
;margin
-top
:100px;"
>
kaivon1
style="
width
:100px
;height
:100px
;background
:red;"
>
kaivon2
style="
margin
-top
:100px
;border
:1px
solid red;"
>
style="
width
:100px
;height
:100px
;background
:green
;margin
:100px0;
">
kaivon1
style="
overflow
:hidden;"
>
style="
width
:100px
;height
:100px
;background
:red
;margin
:100px0;
">
kaivon2
>
overflow 針對超出父級的內容如何顯示
visible 預設值，超出的內容會顯示出來
auto 如果內容超出了父級，那就出現滾動條,
如果內容沒有超出，那就不出現滾動條
hidden 超出的內容給隱藏掉
scroll 不管內容是否超出都出現滾動條
kaivon
kaivon1
kaivon2
kaivon1
kaivon2
kaivon1
kaivon2
BFC的布局規則以及觸發條件
1.bfc的含義 block formatting contexts bfc 塊級元素格式化上下文 它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互關係 塊級元素 父級 是乙個塊元素 內容 子元素 是乙個塊元素 其他元素 與內容同級別的兄弟元素 相互作用 bfc裡的元素與外面的元素...
BFC的觸發條件
bfc block formatting context 塊級格式化上下文，從字面的意思真的很難理解，我特別喜歡張鑫旭的 css世界的結界 的叫法，非常的形象生動，看過火影的同學都知道，非常厲害的忍術都會形成結界，形成乙個封閉的空間，裡面的人出不來，外面的人進不去，bfc就是如此。下面是bfc觸發的...
記憶體對齊的規則以及作用
首先由乙個程式引入話題 include using namespace std struct st1 struct st2 int main cout 程式的輸出結果為 sizeof st1 is 12 sizeof st2 is 8 問題出來了，這兩個一樣的結構體，為什麼sizeof的時候大小不一...