清除浮动有哪些方式？

参考：CSS的浮动及清除浮动的5种方法

1、为什么要清除浮动？

1. 标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。
2. 浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。注意：（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。

所以，清除浮动，主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

2、清除浮动的方法

1. 父级div定义伪类:after和zoom ，推荐

.clearfix:after{
    content:"";  /*设置内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*将文本转为块级元素*/
    visibility:hidden;  /*将元素隐藏*/
    clear:both;  /*清除浮动*/
}
.clearfix{
    zoom:1;  /*为了兼容IE*/
}

优点：浏览器支持好，不容易出现怪问题
缺点：要两句代码结合使用，才能让主流浏览器都支持
2. 结尾处加空div标签并对其应用clear:both 主要使用

//对添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
    <div class="red" style="float:left;">1</div>
    <div class="sienna" style="float:left;">2</div>
    <div class="blue" style="float:left;">3</div>
    //添加一个新元素
    <div class="clear"></div>
</div>

优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：如果页面浮动布局多，就要增加很多空div

3. 父级div定义：overflow:hidden
   优点：简单，代码少，浏览器支持好。
   缺点：必须定义width或zoom:1，不能和position配合使用

4. 父级div定义height
   优点：简单，代码少
   缺点：只适合高度固定的布局，要给出精确的高度

5. 父级div定义overflow:auto
   优点：简单，代码少，浏览器支持好
   缺点：内部宽高超过父级div时，会出现滚动条