请列举几种可以清除浮动的方法（至少两种）

最新推荐文章于 2022-07-21 18:46:09 发布

原创最新推荐文章于 2022-07-21 18:46:09 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍了如何处理网页开发中浮动元素带来的高度塌陷问题，包括添加额外标签、使用`br`标签、设置父元素的`overflow`属性、浮动父元素、设置`display:table`及利用伪元素`:after`等技巧。

                    
                    请列举几种可以清除浮动的方法（至少两种）

注解：浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）

a. 添加额外标签，例如

b. 使用br标签和其自身的html属性，例如

c. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1

d. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout

e. 父元素也设置浮动

f. 父元素设置display:table

g. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout