css 清除浮动的几种方法

清除浮动
包括清除子元素的浮动和清除上级元素的浮动
其中，清除上级元素的浮动，只需设置clear为both就OK了，
而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。而空标签法清除子元素浮动会增加额外标签。
一个块级元素如果没有设置height的大小，那么该元素的高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，此时给父元素设置border或者background都得不到正确的解析

<div class="clearfix">   <div style="background: red;width:100px;height:100px;float: left;"></div>    <div style="background: green;width:100px;height:100px;float: left;"></div>    <div style="background: blue;width:100px;height:100px;float: left;"></div></div>

方法一：增加一个空的div标签

<div class="clearfix">   <div style="background: red;width:100px;height:100px;float: left;"></div>    <div style="background: green;width:100px;height:100px;float: left;"></div>    <div style="background: blue;width:100px;height:100px;float: left;"></div>   <div style="clear:both"></div></div>

方法二：给父元素增加一个clearfix类
该clearfix类的样式为：

.clearfix:after {        visibility: hidden;        display: block;        font-size: 0;        content: " ";        clear: both;        height: 0;    }

方法三，给父元素增加overflow：hidden，*zoom:1;属性 或者 overflow:aotu,*zoom:1.