HTML中清除浮动的三种方法

最新推荐文章于 2025-06-12 15:01:55 发布

原创最新推荐文章于 2025-06-12 15:01:55 发布 · 460 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了在CSS布局中解决浮动元素导致的父元素高度塌陷问题的三种常见方法：使用overflow:hidden；添加清空浮动的空div；以及采用万能清除浮动法。每种方法都有其适用场景和局限性。

当父元素不设置高度，且子元素浮动时，会发生高度塌陷，解决办法如下：
1.给父元素添加overflow:hidden;
《注：如果父元素上有定位，且定位在父元素之外，此方法不适用》
2.最后一个浮动元素的下方添加一个空的div，并添加声明：height:0;overflow:hidden;clear:both;
《注：造成代码冗余》
3.万能清除浮动法：
父元素选择符：after{content".";clear:both;height:0;overflow:hidden;visibility:hidden; display:block;}
《注：.clear:after{content:".";clear: both;display: block;overflow: hidden;height: 0;visibility: hidden;}此写法要在需要清除浮动的父元素标签的class属性上添加空格加clear》