在CSS規(guī)范中垮衷，浮動(dòng)定位不屬于正常的頁(yè)面流（page flow）厅翔，是獨(dú)立定位的。所以搀突，只含有浮動(dòng)元素的父容器刀闷，在顯示時(shí)不考慮子元素的位置，就當(dāng)它們不存在一樣仰迁。這就造成了父容器好像空容器一樣甸昏。
如圖：
解決浮動(dòng)的方法##
方法一、
手動(dòng)設(shè)置父元素的高度為合適的值徐许，達(dá)到撐起父元素的效果施蜜。這種方法的優(yōu)點(diǎn)是簡(jiǎn)單、代碼少雌隅、容易掌握翻默；但是，只適合高度固定的布局恰起，要給出精確的高度修械。如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問(wèn)題检盼。
方法二祠肥、
浮動(dòng)父元素。索性將父容器也改成浮動(dòng)定位，這樣它就可以帶著子元素一起浮動(dòng)仇箱。這種方法不用修改HTML代碼，但是缺點(diǎn)在于父容器變成浮動(dòng)以后东羹，會(huì)影響到后面元素的定位剂桥，而且有時(shí)候，父容器是定位死的属提，無(wú)法變成浮動(dòng)权逗。
方法三、
利用clear:both屬性冤议。在浮動(dòng)元素下方添加一個(gè)非浮動(dòng)元素：<div style="clear: both">斟薇，或者以類名的方式添加.clearfix，clearfix{clear:both}恕酸。原理是父容器現(xiàn)在必須考慮非浮動(dòng)子元素的位置堪滨，而后者肯定出現(xiàn)在浮動(dòng)元素下方，所以顯示出來(lái)蕊温，父容器就把所有子元素都包括進(jìn)去了袱箱。優(yōu)點(diǎn)是簡(jiǎn)單、代碼少义矛、瀏覽器支持好发笔、不容易出現(xiàn)怪問(wèn)題；缺點(diǎn)是如果頁(yè)面浮動(dòng)布局多凉翻，就要增加很多空div了讨。在頁(yè)面中增加冗余標(biāo)簽，違背了語(yǔ)義網(wǎng)的原則制轰。
方法四前计、
讓父容器變得可以自動(dòng)"清理"（clearing）子元素的浮動(dòng)，從而能夠識(shí)別出浮動(dòng)子元素的位置艇挨，不會(huì)出現(xiàn)顯示上的差錯(cuò)残炮。用上overflow屬性。這種方法的缺點(diǎn)主要有二個(gè)缩滨，一個(gè)是IE 6势就、7不支持，另一個(gè)是一旦子元素的大小超過(guò)父容器的大小脉漏，就會(huì)出顯示問(wèn)題苞冯。
解決ie6、7兼容問(wèn)題侧巨，可以在父元素添加zoom: 1;屬性
可以使用overflow屬性的auto舅锄、scroll和hidden值來(lái)清除浮動(dòng)。若內(nèi)容太大司忱，auto皇忿、scroll會(huì)出現(xiàn)滾動(dòng)條畴蹭，太丑了，但也保持了原有的內(nèi)容鳍烁；hidden會(huì)裁剪元素叨襟，超出元素框邊界的內(nèi)容不可見，并且不利于seo幔荒。
參考鏈接：深入理解CSS溢出overflow
方法五糊闽、
父元素定義 偽類:after 和 zoom
代碼：
.clearfix::after{
content: ' ';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
原理：類似于clear:both方法，利用:after在元素內(nèi)部插入元素塊爹梁，從而達(dá)到清除浮動(dòng)的效果右犹。
clearfix是父容器的class名稱。
content:' ';是在父容器的開頭或結(jié)尾處放一個(gè)空白字符姚垃。
display: block;確保這個(gè)空白字符是獨(dú)立區(qū)塊
ps：
content: '';display:block;對(duì)于FF/chrome/opera/IE8不能缺少念链，其中content（）可以取值也可以為空。
height: 0;讓所添加的空白字符為0高度
visibility:hidden;令瀏覽器渲染它莉炉，但是不顯示钓账。并且防止溢出
clear: both;清除浮動(dòng)，讓后面添加的子元素不找前面的左右浮動(dòng)絮宁。
*zoom:1添加一條IE 6的獨(dú)有命令,這條命令的作用是激活父元素的hasLayout屬性梆暮，讓父元素?fù)碛凶约旱牟季帧E 6會(huì)讀取這條命令绍昂，其他瀏覽器則會(huì)直接忽略它啦粹。
IE使用Layout概念來(lái)控制元素的尺寸和位置。如果一個(gè)元素有Layout窘游，它就有自身的尺寸和位置唠椭；如果沒(méi)有，它的尺寸和位置由最近的擁有布局的祖先元素控制忍饰。
簡(jiǎn)而言之贪嫂，*zoom:1是為了兼容IE6、7
終極版一艾蓝、
Nicolas Gallagher貼出了更通用的生產(chǎn)代碼力崇。
/**
* 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:' ';（注意內(nèi)容字符串中的空格）避免了一個(gè) Opera錯(cuò)誤，
:before可以防止頂部邊距在現(xiàn)代瀏覽器中崩潰赢织。這有兩個(gè)好處：它確保與其他浮動(dòng)控制技術(shù)的視覺(jué)一致性亮靴，從而創(chuàng)建新的塊格式化環(huán)境，例如于置， overflow:hidden茧吊；當(dāng)使用IE 6/7*zoom:1時(shí)，它確保視覺(jué)一致性。
:after用于清除浮體搓侄。
因此瞄桨，不需要隱藏任何生成的內(nèi)容，并且減少所需代碼的總量讶踪。
display:table會(huì)產(chǎn)生一些匿名盒子讲婚，這些匿名盒子的其中一個(gè)（display值為table-cell）會(huì)形成BFC。
BFC：即Block Formatting Context 直譯為“塊級(jí)格式化范圍”俊柔。可以把它理解成是一個(gè)獨(dú)立的容器活合，并且這個(gè)容器的里box的布局雏婶，與容器外部的毫不相干。BFC 具有普通容器沒(méi)有的一些特性白指，例如可以包含浮動(dòng)元素留晚，上面的方法四（如 overflow 方法）就是觸發(fā)了父元素的 BFC ，使到它可以包含浮動(dòng)元素告嘲，從而防止出現(xiàn)高度塌陷的問(wèn)題错维。
觸發(fā) BFC 的條件如下：
- 浮動(dòng)元素，float 除 none 以外的值
- 絕對(duì)定位元素橄唬，position（absolute赋焕，fixed）
- display 為以下其中之一的值 inline-blocks，table-cells仰楚，table-captions
- overflow 除了 visible 以外的值（hidden隆判，auto，scroll）
在 CSS3 中僧界，BFC 叫做 Flow Root侨嘀，并增加了一些觸發(fā)條件：
- display 的 table-caption 值
- position 的 fixed 值，其實(shí) fixed 是 absolute 的一個(gè)子類捂襟，因此在 CSS2.1 中使用這個(gè)值也會(huì)觸發(fā) BFC 咬腕，只是在 CSS3 中更加明確了這一點(diǎn)。
詳見：
詳說(shuō)清除浮動(dòng)
詳說(shuō) Block Formatting Contexts (塊級(jí)格式化上下文)
終極版二葬荷、
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom:1; /*IE/7/6*/
}
:content:"\200B";Unicode字符里有一個(gè)“零寬度空格”涨共，即 U+200B，代替原來(lái)的“.”闯狱，可以縮減代碼量煞赢。而且不再使用visibility:hidden;。
參考：
浮動(dòng)元素容器的clearing問(wèn)題
css清除浮動(dòng)float的三種方法總結(jié)
深入理解CSS溢出overflow
A new micro clearfix hack
clearfix清除浮動(dòng)進(jìn)化史
詳說(shuō) Block Formatting Contexts (塊級(jí)格式化上下文)
詳說(shuō)清除浮動(dòng)
關(guān)于Block Formatting Context－－BFC和IE的hasLayout
