清除浮动方法汇总

1.子元素添加一行空div设置 style="clear:both"属性
.....
div1,.div2{
width:200px;
height:200px;
background-color: green;
float: left;
}
.div2{
background-color: red;
}
.....

<div>
<div class="div1"></div>
<div class="div2"></div>
<div style="clear:both;"></div>
</div>

2.父元素添加 {overflow:hidden}
<div style="overflow:hidden;">
<div class="div1"></div>
<div class="div2"></div>

</div>

3.父元素定义伪类：after

.....
.div1,.div2{
width:200px;
height:200px;
background-color: green;
float: left;
}
.div2{
background-color: red;
}
.parent{
zoom:1;
}
.parent:after{
display: block;
clear: both;
content:" ";
visibility: hidden;
}
......
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>

</div>
<div> this is a test</div>

4.子元素结束处加</br style="cleat:both;">
....
<div >
<div class="div1"></div>
<div class="div2"></div>
<br style="clear:both;">
</div>
.....

5 父元素设置 overflow:auto 属性

.parent{
overflow: auto;
}

7.给父元素设置高度
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
.parent{
/*overflow: auto;*/
/*display: table;*/
height:400px;
}

<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<br style="clear:both;">
</div>
<div> this is a test</div>

8.父元素也一起浮动
让父元素和子元素成一个整体
...
.parent{
/*overflow: auto;*/
/*display: table;*/
/*height:400px;*/
float:left;
background:blue;
width:98%;
}
....