问题的产生
代码：
<div class="box"> <div class="div"></div> </div>
box{
width:300px; margin:0 auto; border:10px solid #000;
}
.div{
width:200px; height:200px; background:red;
}
效果：
添加浮动后
.div{width:200px;height:200px;background:red;float:left;}
清除浮动的方法
第一种：给父元素设置宽高
第二种：给父元素也添加浮动
第三种：给父元素添加”display:inline-block“
第四种：在浮动元素后添加元素，并设置其clear属性
<div class="box"> <div class="div"></div> <!—因为clear元素并未脱离文档流，所以会撑起box元素的高--> <div class="clear"></div> </div> .clear{height:0;font-size:0;clear:both;}
第五种：br元素的clear属性
br元素本身没有高度，所以也就不会存在IE低版本下最小高度问题。只需要在浮动元素下添加一句 : <br clear=”all” />
<div class="box"> <div class="div"></div> <br clear="all"/><!—就这一句解决问题--> </div>
第六种：overflow【常见】
overflow常用三大属性
a) auto （溢出显示滚动条）
b) scroll （默认就显示滚动条）
c) hidden （溢出隐藏）[常用]
第七种：after伪类【各大公司推荐】
.box:after{content:"";display:block;clear:both;}
原文：https://www.cnblogs.com/embrace-ly/p/10560934.html
