什麼是CSS盒模型
基本概念：標準模型+IE模型
盒模型細分成標準模型和IE模型兩種模式，兩者差別就是劃定界限不一樣。
主要還是瀏覽器解析盒模型標準各不一樣引起的。瀏覽器預設盒子應該標準模型，而IE則認為邊框+內邊距+內容才算的是盒模型。
所以為了解決這矛盾，文件需要宣告DOCTYPE型別，這樣所有的瀏覽器都會把盒模型解釋為b標準盒模型
標準模型和IE模型區別
- content-box（標準盒模型）
- width = 內容的寬度
- height = 內容的高度
- border-box（IE模型）
- width = border + padding + 內容的寬度
- height = border + padding + 內容的高度
CSS如何設定這兩種模型
有一天，有人覺得IE模型和標準模型各各的優點，所以CSS3規範有新出box-size屬性來轉換兩者模式（預設標準模型）
然而你以為這樣就結束了嗎？並沒有。
當你寫複雜點頁面時候又會遇到一些常見的問題：
- 上下兩個相鄰盒子的margin會發生重疊
- 浮動盒子和普通盒子重疊
- 盒容器裡面的子元素影響到外面的元素。
- 計算浮動盒子高度為零。
為了解決這些問題，我們就要觸發BFC，來處理這些問題：
什麼是BFC原理
塊級格式化上下文
怎麼觸發 BFC
- float不為none
- position不為static/relative
- display的值為inline-block、table-cell、table-caption、flex
- overflow的值不為visible
上下兩個相鄰盒子的margin會發生重疊
解決方法：
浮動盒子和普通盒子重疊
浮動的盒子會在文件流的盒子上面，主要是瀏覽器識別不到浮動盒子，也就計算不到高度，解決方法，給盒子加個屬性觸發BFC