一、设置父元素的高度。
优点：简单，方便。
缺点：无法自适应后面添加的元素的，即后面用其他方式添加的元素也会出现框架坍塌现象。
css代码：.box-wrapper{height:100px;}
二、使用overflow:hidden属性。
优点：简单，有效。
缺点：对进行过定位的元素进行裁剪，即通过定位的子元素溢出父元素的部分会进行隐藏。
css代码：.box-wrapper{overflow:hidden;}
三、隔墙法：在需要清除浮动的地方，设置空盒子添加清除属性clear:both进行清除。
优点：简单，有效。
缺点：①代码过于冗余，如果出现多处浮动要写多个空盒子，增加了文件的大小。
②使用本方法会出现设置margin值异常，空盒子两边的margin会被无效化。
html代码：<div style="clear:both;"></div>或<div class="clearbox"></div>
css代码：.clearbox{clear:both;}
四、内墙法：在需要清除浮动的地方，设置空盒子添加清除属性clear:both进行清除。
优点：简单，有效解决空盒子两边的margin会被无效化。
缺点：代码过于冗余，如果出现多处浮动要写多个空盒子，增加了文件的大小。
html代码：以下要设置在需要清除浮动的内部末尾处：
<div style="clear:both;"></div>或<div class="clearbox"></div>
css代码：.clearbox{clear:both;}
五、伪类划分法：使用伪类 :after 和 :before。
优点：有效，可以解决两个盒子之间设置margin值无效的问题。
缺点：几乎可以忽略不计。
css代码：
/*现代浏览器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以解决现代浏览器上边距折叠的问题*/
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
