清除浮動(dòng)以下幾種方式:
1:使用偽類標(biāo)簽
2:添加一個(gè)多余的div
3:添加br標(biāo)簽使用其clear="all"屬性
4:父元素設(shè)置overflow:hidden
5:父元素設(shè)置display: table
.clear::after{
display: block;
content: '.';
height: 0px;
visibility: hidden;
clear: both;
?? }
第一種: 清除浮動(dòng) 使用偽類標(biāo)簽
?<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>
? 第二種 添加額外的標(biāo)簽
<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>
? ? 第三種 父類標(biāo)簽設(shè)置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>
? ? ? 第四種 父類標(biāo)簽設(shè)置設(shè)置為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標(biāo)簽
<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>
