清除浮动的几种方式

清除浮动的几种方式

今天碰到了一个浮动导致元素没有高度的问题，网上搜了以下，有片文章写的比较好，拿过来自己在补充以下。不算纯粹原创，文末注明了出处，以表示对作者的尊重。本文用MarkDown写作

一般来说清除浮动有如下的几种方式

1.额外标签法

这种办法，如果对代码有洁癖，那么不建议使用。

<style >
.float{
float:left;
}
.floatFix{
clear:both;
}
</style>
<div class = "wrap">
<div class= "float"></div>
<div class= "float"></div>
<div class= "floatFix"></div>
</div>

2.使用after元素法

<style >
.float{
float:left;
}
.wrap:after{
content: '';
display: block;
clear: both;
}
</style>
<div class = "wrap">
<div class= "float"></div>
<div class= "float"></div>
</div>

注

伪类after，是在寄生元素后添加content内容，相当于添加了一个新的html标签。

然后再content下方，添加content的相关样式属性。

3.利用overflow:hidden属性

<style >
.float{
float:left;
}
.wrap{
overflow:hidden;
}
</style>
<div class = "wrap">
<div class= "float"></div>
<div class= "float"></div>
</div>

以下方式不太推荐：

4.给父元素定高

5.父元素浮动

6.父元素处于绝对定位

参考文章