清除浮動的常用三種方式
一、clear：both /left? /right? /none? /inherit
分別代表在元素左右兩側不允許出現浮動元素/左側不允許出現浮動元素/右側不允許出現浮動元素/不清除浮動/繼承父元素的值
這只是清除了浮動對于兄弟元素的影響
二、overflow：hidden / auto
在浮動元素的父元素上設置了 overflow 的值為 hidden 或 auto ，可以閉合浮動。
清除浮動對父元素的影響
三、：after 偽元素
這個辦法不但完美兼容主流瀏覽器，并且也很方便，使用重用的類，可以減輕代碼編寫，另外網頁的結構也會更加清晰。
具體參考：kayosite.com/remove-floating-style-in-detail.html?
BFC
一. BFC 是什么？
簡單來說，BFC 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用
具有 BFC 的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且 BFC具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。
二.如何觸發 BFC
上面介紹了 BFC 的定義，那么如何觸發 BFC 呢？
滿足下面任一條件的元素，會觸發為 BFC ：
浮動元素，float 除 none 以外的值
絕對定位元素，position（absolute，fixed）
display 為以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）
三. BFC 的特性
從整體上看，BFC 是隔離了的容器，這個具體可以表現為三個特性：
1. BFC 會阻止外邊距折疊（margin collapse）
2. BFC 可以包含浮動的元素
3. BFC 可以阻止元素被浮動元素覆蓋
