一、設(shè)置父元素的高度捌年。
優(yōu)點：簡單，方便醇滥。
缺點：無法自適應(yīng)后面添加的元素的黎比，即后面用其他方式添加的元素也會出現(xiàn)框架坍塌現(xiàn)象。
css代碼：.box-wrapper{height:100px;}
二鸳玩、使用overflow:hidden屬性阅虫。
優(yōu)點：簡單，有效不跟。
缺點：對進行過定位的元素進行裁剪颓帝，即通過定位的子元素溢出父元素的部分會進行隱藏。
css代碼：.box-wrapper{overflow:hidden;}
三、隔墻法：在需要清除浮動的地方购城，設(shè)置空盒子添加清除屬性clear:both進行清除吕座。
優(yōu)點：簡單，有效瘪板。
缺點：①代碼過于冗余吴趴，如果出現(xiàn)多處浮動要寫多個空盒子，增加了文件的大小侮攀。
÷嘀Α②使用本方法會出現(xiàn)設(shè)置margin值異常，空盒子兩邊的margin會被無效化兰英。
html代碼：<div style="clear:both;"></div>或<div class="clearbox"></div>
css代碼：.clearbox{clear:both;}
四撇叁、內(nèi)墻法：在需要清除浮動的地方，設(shè)置空盒子添加清除屬性clear:both進行清除畦贸。
優(yōu)點：簡單陨闹，有效解決空盒子兩邊的margin會被無效化。
缺點：代碼過于冗余家制，如果出現(xiàn)多處浮動要寫多個空盒子正林，增加了文件的大小。
html代碼：以下要設(shè)置在需要清除浮動的內(nèi)部末尾處：
????????<div style="clear:both;"></div>或<div class="clearbox"></div>
css代碼：.clearbox{clear:both;}
五颤殴、偽類劃分法：使用偽類?:after?和??:before觅廓。
優(yōu)點：有效，可以解決兩個盒子之間設(shè)置margin值無效的問題涵但。
缺點：幾乎可以忽略不計杈绸。
css代碼：
????????/*現(xiàn)代瀏覽器clearfix方案，不支持IE6/7*/
? ? ? ? .clearfix:after {
? ? ? ? ? ? display: table;
? ? ? ? ? ? content: " ";
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? /*全瀏覽器通用的clearfix方案*/?
? ? ? ? /*引入了zoom以支持IE6/7*/
? ? ? ? .clearfix:after {
? ? ? ? ? ? display: table;
? ? ? ? ? ? content: " ";
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? .clearfix{
? ? ? ? ? ? *zoom: 1;
? ? ? ? }
? ? ? ? /*全瀏覽器通用的clearfix方案【推薦】*/
? ? ? ? /*引入了zoom以支持IE6/7*/
? ? ? ? /*同時加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題*/
? ? ? ? ? .clearfix:before,
? ? ? ? ? .clearfix:after {
? ? ? ? ? ? ? display: table;
? ? ? ? ? ? ? content: " ";
? ? ? ? ? }
? ? ? ? .clearfix:after {
? ? ? ? ? ? clear: both;
? ? ? ? }
? ? ? ? .clearfix{
? ? ? ? ? ? *zoom: 1;
? ? ? ? }
