清除浮动的8种方式
1.为父级元素设置伪类:after和zoom
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
/*解决浮动代码*/
.clearfloat:after{
content:"";
display:block;
clear:both;
}
.clearfloat{
zoom:1;
}
</style>
<!-- Html部分 -->
<div class="box1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：原理和方法2有点类似，但由于只有IE8以上和非IE浏览器才支持:after，所以针对低版本的IE，要使用zoom(IE专有属性，可以触发IE的haslayout属性，有清除浮动，清除margin重叠等作用)才可解决浮动问题
优点：浏览器支持好，不容易出现其它问题
缺点：需要与zoom结合才可以让主浏览器都支持
建议：推荐使用
2.在结尾处添加一个空的标签clear:both
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
/*解决浮动的代码*/
.clearfloat{
clear:both;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="box2">box2</div>
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现其它问题
缺点：增加多于div，强迫症者难以忍受啊！！！
建议：不推荐，此方法主要是以前使用的一种清除浮动方法
3.为父级元素定义height
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
height:200px;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：父级元素手动定义height，就解决了父级元素无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果子元素高度和父级元素不一样时，就会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
4.为父级元素定义overflow:hidden
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
overflow:hidden;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
5.为父级元素定义overflow:auto
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
overflow:auto;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级元素时，会出现滚动条
建议：不推荐使用
6.父元素跟随浮动
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
width:100%;
float:left;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
/*解决浮动的代码*/
clear:both;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题，需要指定宽度
建议：不推荐使用，只作了解
7.父级元素定义display:table
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
width:100%;
display:table;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="box2">box2</div>
原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题，需要指定宽度
建议：不推荐使用，只作了解
8.结尾处加br标签clear:both
/*CSS部分*/
<style type="text/css">
.box1{
background:#ccc;
border:1px solid red;
/*解决浮动的代码*/
zoom:1;
}
.box2{
background:#eee;
border:1px solid red;
height:100px;
margin-top:10px;
}
.left{
float:left;
width:20%;
height:200px;
background:#adf;
}
.right{
float:right;
width:30%;
height:80px;
background:#add;
}
/*解决浮动的代码*/
.clearfloat{
clear:both;
}
</style>
<!-- Html部分 -->
<div class="box1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="box2">box2</div>
原理：父级元素定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both,和方法2类似
优点：简单，代码少，浏览器支持好，不容易出现其它问题
缺点：增多一个br，强迫症难以忍受啊！！！
建议：不推荐使用，只作了解
