面试题 -- 清除浮动的几种方式及优缺点？

Ray Shine 2022/6/9 CSS

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

# `clear:both`

使用空标签清除浮动，缺点是增加了很多无意义的标签。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>

使用 overflow 属性清除浮动，优点是用于兼容IE，缺点是内部宽高超过父级 div 时，会出现滚动条。

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}

（目前大型网站都在用）使用 after 伪元素清除浮动，缺点是IE8以上和非IE浏览器才支持。

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}