在设计中常常会遇到这样的问题:
当容器内部有float样式时,容器的高度不会被撑开。
下面介绍两种方法解决上面的问题
第一种:在浮动元素后面加一个clear: both;比较常见的方法。
<style type="text/css">
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
</style>
<div>
<div class="left">
</div>
<div class="right">
</div>
<div class="clear">
</div>
</div>
缺点:兼容性不强,IE6下div.clear会有高度,需要height:0,overflow:hidden来解决;页面有冗余代码。
第二种方法:clearfix;最完美的解决方法。
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
或者
.clearfix{
zoom:1
}
.clearfix:before,.clearfix:after{
content:'\0020';
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0
}
.clearfix:after{
clear:both
}
用法:在浮动外的容器上加一个clearfix类。
<div class="clearfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
或者
<div class="panel clearfix">
内容···
</div>