清除浮动的三种方法 clear: both、width: 100%;overflow: hidden、换行

老白 7个月前 282浏览 0评论

在写网页的时候经常会遇到各种浮动,比如你使用了float,就会造成紧跟在其后的元素产生影响,比如

<style>

    .box1{float:left;}

   .box2{}

</style>

<div class="box1">盒子1</div>

<div class="box1">盒子2</div>

此时,对box1进行了左浮动,那么盒子2本来是另起一行的块级元素,因为收到box1的浮动影响,会变成跟进box1的行内元素了,如果要摆脱box1的浮动影响,可以对box2浮动进行清除!

方法1:(推荐)

对box2进行清除浮动,增加:

box2{clear:both} 意为清除前后所有浮动

方法2:width: 100%;overflow: hidden

意为宽度改为100%,并隐藏浮动

方法3:使用br进行换行,这种情况也是可以的,要根据实际情况可能需要多个br才能完成换行清除浮动,最不建议使用!


发表评论