css对于float返回文本流的做法
浏览数：21 /
时间：2015年06月09日
在设计中常常会遇到这样的问题：
当容器内部有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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
