清除浮动以下几种方式:
1:使用伪类标签
2:添加一个多余的div
3:添加br标签使用其clear="all"属性
4:父元素设置overflow:hidden
5:父元素设置display: table
.clear::after{
display: block;
content: '.';
height: 0px;
visibility: hidden;
clear: both;
}
第一种: 清除浮动 使用伪类标签
<div class="clear">
<div style="position: left;width: 50px;height: 60px;background-color: red"></div>
<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>
</div>
第二种 添加额外的标签
<div>
<div style="position: left;width: 50px;height: 60px;background-color: red"></div>
<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>
<div style="clear: both"></div>
</div>
第三种 父类标签设置overflow
<div style="overflow: hidden">
<div style="position: left;width: 50px;height: 60px;background-color: red"></div>
<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>
</div>
第四种 父类标签设置设置为table
<div style="display: table">
<div style="position: left;width: 50px;height: 60px;background-color: red"></div>
<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>
</div>
第五种 添加br标签
<div>
<div style="position: left;width: 50px;height: 60px;background-color: red"></div>
<div style="position: left;width: 50px;height: 60px;background-color: yellow"></div>
</br clear="all">
</div>
