清除浮动的方法

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {

border: 1px solid red;
/*overflow: hidden;
*zoom: 1;*/
/*overflow: auto;*/
/*float: right;*/
/*display: table;*/
}
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{display: inline-block;}

.main {
200px;
height: 200px;
background: red;
float: left;
margin: 5px;
}

.slide {
200px;
height: 200px;
background: blue;
float: left;
margin: 5px;
}
/*第一种方法:在浮动的元素的同级添加一个空元素,使它清除浮动,这时新加的元素就会在文档流
中,父元素就会被撑开,包含空元素.由于空元素与其他两个div同级,自然其他两个div也会被
包含进来,导致父元素被撑开. */
/*.null{clear: both;}*/
/*第二种是在同级添加br clear="all" 也会清除浮动达到同样的效果 */
/*第三种是在父元素添加overflow: hidden,内容增多时候容易造成不会
自动换行导致内容被隐藏掉，无法显示需要溢出的元素；产生hasLayout */
/*第四种overflow: auto,产生hasLayout*/
/*第五种:父元素也设置浮动会使得与父元素相邻的元素也会受到影响布局会发生改变*/
/*第六种父元素设置display:table,盒模型属性已经改变，由此造成的一系列问题*/
/*第七种父类添加伪元素after*/
</style>

</head>

<div class="main">
main
</div>

<div class="slide">
slide
</div>


</div>
<div class="footer">
footer
</div>
</body>

</html>