css对于float返回文本流的做法

2019独角兽企业重金招聘Python工程师标准>>>

在设计中常常会遇到这样的问题：
当容器内部有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>

转载于:https://my.oschina.net/u/1402334/blog/296441