兩個經典的BUG

margin塌陷問題

當為一對普通流中的父子盒子中的子盒子設定margin-top時，如果父盒沒有設定一個border-top，且雙方的margin-top都為正的時候，那麼就會存在有一個高度塌陷的問題。
具體的表現是父盒和子盒共享margin-top，如果他們同時具有margin-top的時候，以值最大的為準。
該問題的解決方法是使用偽元素來解決。也可以用BFC來彌補。

margin合併問題

當兄弟元素在文字流中，並且兄弟元素之間的的垂直margin都為正時，margin-top和margin-bottom會合並，選擇值最大的。
這個問題可以使用BFC來解決，但是實際開發中是禁止隨意改動HTML

::before和::after兩個偽元素

::before和::after這兩個偽元素分別可以建立在在選定Element的子元素的邏輯最前和最後。他們兩個一開始都是行內元素，同時具有一個獨特的屬性content，這個屬性的值為偽元素的內容。

CSS的 content CSS 屬性用於在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。

注意：當你想使用偽元素來讓一個容器包裹住浮動的塊元素的話，當在偽元素上面使用clear

BFC和浮動

BFC如何觸發

position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;

浮動模型

注意：凡是使用了float的塊元素，在系統中，就像是他變成了inline-block一樣，文字浮動在他的周圍。

浮動流：
浮動流中的元素，塊級元素看不到（就好像是不在一個空間一樣），BFC能看到，inline能看到