1.额外标签法
<style> .main{ width: 500px; background-color: #A9A9A9; } .left{ float: left; width: 200px; height: 200px; background-color: #FF69B4; } .right{ float: right; width: 300px; height: 400px; background-color: #FFC0CB; } .clear{ display: block; clear: both; } </style> <div class="main"> <div class="left"></div> <div class="right"></div> <span class="clear"></span> </div>
2.使用overflow
<style> .main { width: 500px; background-color: #A9A9A9; overflow: hidden; } .left { float: left; width: 200px; height: 200px; background-color: #FF69B4; } .right { float: right; width: 300px; height: 400px; background-color: #FFC0CB; } </style> <div class="main"> <div class="left"></div> <div class="right"></div> </div>
3.伪元素清除浮动
/* 伪元素属于行内元素,没有宽高,需要转化 */
/* 正常浏览器清除浮动 */
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* ie6清除浮动 * 仅ie7以下版本识别*/
.clearfix{
*zoom: 1;
}
4.双伪元素清除浮动
/* 双伪元素清除浮动 */
/* 正常浏览器清除浮动 */
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/* ie7以下专用 */
.clearfix{
*zoom: 1;
}
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>