标签：使用 before htm 方法 ie7 浮动 highlight ie6 hid
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>
标签：使用 before htm 方法 ie7 浮动 highlight ie6 hid
原文地址：https://www.cnblogs.com/dch0/p/11570422.html
