清除浮动的几种方式

面试官: 说说为什么要清除浮动？

由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
清除浮动主要解决，父元素因为子级元素浮动引起的内部高度为0的问题。

详解如下：

给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

当我给内部两个盒子加上float属性的时候
底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

---

常用清除浮动的几种方式

①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
③给需要清除浮动的元素设置clear：both；
④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：.clearfix：after{content：""；clear：both；display：block；} .clearfix{zoom：1}

<div class="container clearfix">
   <div class="box"></div>
</div>	
<div class="main "></div>

<style>
.box{
   width:100px;
   height:100px;
   background:yellow;
   float: left;
}
.main{
   width:150px;
   height: 150px;
   background:red;
}
.clearfix:after{
   content: "";
   clear: both;
   display: block;
}
.clearfix{
   zoom:1;
}
</style>