在CSS規范中，浮動定位不屬于正常的頁面流（page flow），是獨立定位的。所以，只含有浮動元素的父容器，在顯示時不考慮子元素的位置，就當它們不存在一樣。這就造成了父容器好像空容器一樣。
如圖：
解決浮動的方法##
方法一、
手動設置父元素的高度為合適的值，達到撐起父元素的效果。這種方法的優點是簡單、代碼少、容易掌握；但是，只適合高度固定的布局，要給出精確的高度。如果高度和父級div不一樣時，會產生問題。
方法二、
浮動父元素。索性將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動。這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以后，會影響到后面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
方法三、
利用clear:both屬性。在浮動元素下方添加一個非浮動元素：<div style="clear: both">，或者以類名的方式添加.clearfix，clearfix{clear:both}。原理是父容器現在必須考慮非浮動子元素的位置，而后者肯定出現在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。優點是簡單、代碼少、瀏覽器支持好、不容易出現怪問題；缺點是如果頁面浮動布局多，就要增加很多空div。在頁面中增加冗余標簽，違背了語義網的原則。
方法四、
讓父容器變得可以自動"清理"（clearing）子元素的浮動，從而能夠識別出浮動子元素的位置，不會出現顯示上的差錯。用上overflow屬性。這種方法的缺點主要有二個，一個是IE 6、7不支持，另一個是一旦子元素的大小超過父容器的大小，就會出顯示問題。
解決ie6、7兼容問題，可以在父元素添加zoom: 1;屬性
可以使用overflow屬性的auto、scroll和hidden值來清除浮動。若內容太大，auto、scroll會出現滾動條，太丑了，但也保持了原有的內容；hidden會裁剪元素，超出元素框邊界的內容不可見，并且不利于seo。
參考鏈接：深入理解CSS溢出overflow
方法五、
父元素定義 偽類:after 和 zoom
代碼：
.clearfix::after{
content: ' ';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
原理：類似于clear:both方法，利用:after在元素內部插入元素塊，從而達到清除浮動的效果。
clearfix是父容器的class名稱。
content:' ';是在父容器的開頭或結尾處放一個空白字符。
display: block;確保這個空白字符是獨立區塊
ps：
content: '';display:block;對于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。
height: 0;讓所添加的空白字符為0高度
visibility:hidden;令瀏覽器渲染它，但是不顯示。并且防止溢出
clear: both;清除浮動，讓后面添加的子元素不找前面的左右浮動。
*zoom:1添加一條IE 6的獨有命令,這條命令的作用是激活父元素的hasLayout屬性，讓父元素擁有自己的布局。IE 6會讀取這條命令，其他瀏覽器則會直接忽略它。
IE使用Layout概念來控制元素的尺寸和位置。如果一個元素有Layout，它就有自身的尺寸和位置；如果沒有，它的尺寸和位置由最近的擁有布局的祖先元素控制。
簡而言之，*zoom:1是為了兼容IE6、7
終極版一、
Nicolas Gallagher貼出了更通用的生產代碼。
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: ' '; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
content:' ';（注意內容字符串中的空格）避免了一個 Opera錯誤，
:before可以防止頂部邊距在現代瀏覽器中崩潰。這有兩個好處：它確保與其他浮動控制技術的視覺一致性，從而創建新的塊格式化環境，例如， overflow:hidden；當使用IE 6/7*zoom:1時，它確保視覺一致性。
:after用于清除浮體。
因此，不需要隱藏任何生成的內容，并且減少所需代碼的總量。
display:table會產生一些匿名盒子，這些匿名盒子的其中一個（display值為table-cell）會形成BFC。
BFC：即Block Formatting Context 直譯為“塊級格式化范圍”。可以把它理解成是一個獨立的容器，并且這個容器的里box的布局，與容器外部的毫不相干。BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上面的方法四（如 overflow 方法）就是觸發了父元素的 BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。
觸發 BFC 的條件如下：
- 浮動元素，float 除 none 以外的值
- 絕對定位元素，position（absolute，fixed）
- display 為以下其中之一的值 inline-blocks，table-cells，table-captions
- overflow 除了 visible 以外的值（hidden，auto，scroll）
在 CSS3 中，BFC 叫做 Flow Root，并增加了一些觸發條件：
- display 的 table-caption 值
- position 的 fixed 值，其實 fixed 是 absolute 的一個子類，因此在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。
終極版二、
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom:1; /*IE/7/6*/
}
:content:"\200B";Unicode字符里有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden;。
參考：
浮動元素容器的clearing問題
css清除浮動float的三種方法總結
深入理解CSS溢出overflow
A new micro clearfix hack
clearfix清除浮動進化史
詳說 Block Formatting Contexts (塊級格式化上下文)
詳說清除浮動
關于Block Formatting Context－－BFC和IE的hasLayout
