方法一：使用內容生成的方式清除浮動

這種方法不能解決margin在垂直邊界上的疊加問題，如果不涉及margin的邊界疊加問題使用這種方法清除浮動就行了 。

 1 /*
 2 :after 選擇器向選定的元素之後插入內容 
 3 content:" "; （注意這裡有一個空格）生成內容為空 
 4 display: block;
 5 clear:both; 清除前面元素浮動帶來的影響 
 6 */
 7 .clearfix:after {
 8    content:""; 
 9    display: block; 
10    clear:both; 
11 }

方法二：使用偽元素方式清除浮動

bootstrap3.3.7中就使用這種方法清除浮動，這種方法程式碼比第一種多一點，不過它能解決margin在垂直邊界上的疊加問題。

盒子模型垂直方向的距離由margin決定。屬於同一個BFC(Block formatting context直譯為”塊級格式化上下文”)的兩個相鄰盒子的margin會發生重疊 
注意：發生重疊後，外邊距的高度等於兩個發生重疊的外邊距的高度中的較大者。至於margin的邊界重疊和BFC的問題有很多資料可查我就不再贅述了。

 1 /*
 2 瀏覽器支援： Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 8+
 
 3 1.  content:" ";（注意這裡有一個空格）是為了避免Opera Bug的一種方法。
 4 當contenteditable這個屬性包含在document中的任何地方時會導致空格符出現在元素的頂部和底部，這些空格符是需要清除的。
 5 2.  當':before'需要包含其子元素的margin-top時，使用'table'替代'block'。
 6 */
 7 .clearfix:before,
 8 .clearfix:after {
 9     content: " "; /* 1 */
10     display: table; /* 2 */
11 }
12 
13 .clearfix:after 
 
{
14     clear: both;
15 }

備註：

這兩種方法都不破壞文件結構也沒有什麼副作用相容性也好，網上也有其他清除浮動的方法，不過都有些弊端，這兩種相對更好一些。

參考文獻：

清除浮動 的多種方式（clearfix）：https://blog.csdn.net/FE_dev/article/details/68954481 

A new micro clearfix hack：http://nicolasgallagher.com/micro-clearfix-hack/