CSS - 清除浮动问题

最新推荐文章于 2025-07-04 17:31:59 发布

原创最新推荐文章于 2025-07-04 17:31:59 发布 · 792 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了四种清除浮动的方法，并分析了各自的实现原理及适用场景。推荐使用clearfix类和overflow属性来清除浮动，避免使用父元素浮动的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做到一道题：

(单选题) 浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的?

A 在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>

B 通过设置父元素overflow值为hidden

C 父元素也设置浮动

D 给父元素添加clearfix类

解析：

A. clear:both不允许左右有浮动元素。浮动元素末尾加一个空元素div，并设置样式clear:both，就相当于在这个元素的前后行添加足够的清除空间，父元素会自动获取高度。可以解决高度坍塌问题。

B. 在添加overflow属性后(值为hidden或者auto)，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。必须定义width（因为浮动元素被隐藏可能会有溢出问题）或zoom:1，同时不能定义height，让父元素自动获取height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

C. 父元素添加浮动就会整体浮动影响布局

D. 即给父元素增加class="clearfix"，然后在样式中设置：

.clearfix :after{
    clear:both;
    display:block;
    content:"";
    visibility:hidden;
    height:0;
}

.clearfix{
    zoom:1;
}

(1)其实也是在浮动元素后面加一个height为0的块，并且clear:both; display:block；visibility:hidden；

display：block；即将此元素显示为块级元素，自为一行。
visibility：hidden；就是不显示，但是所占位置没有被清除。

(2) zoom(IE专有属性)可解决ie6,ie7浮动问题

zoom:
设置或检索对象的缩放比例
normal | <number> | <percentage>

注意：IE8以上和非IE浏览器才支持:after

总结：

解决办法1：在父元素里&&浮动元素的后面加一个块，并左右清除浮动。

解决办法2：让父元素包含浮动元素，

参考：

[1]. https://www.jb51.net/css/173023.html

[2]. https://www.jianshu.com/p/09bd5873bed4

[3]. http://www.cnblogs.com/ForEvErNoME/p/3383539.html