清除浮动的几种方式和优缺点

最新推荐文章于 2021-10-12 19:09:37 发布

置顶牛大der

最新推荐文章于 2021-10-12 19:09:37 发布

阅读量335

点赞数

分类专栏： HTML 文章标签： css html

本文链接：https://blog.youkuaiyun.com/m0_47759438/article/details/112259735

版权

2 篇文章

订阅专栏

本文总结了多种清除HTML中浮动元素的方法，包括使用空div、before/after伪元素、overflow:hidden等，并探讨了每种方法的优点与缺点。

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

在父元素结尾处添加空的div标签，clear:both。
优点：简单，代码少，浏览器支持好，不容易出问题；
缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。
给父元素添加before，after为元素。
优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持
缺点：代码多
```
#content:after{content:"";display:block;clear:both;}
选择器:after{content:"";display:block;clear:both;}
```
给父元素添加overflow:hidden属性。
必须定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：代码少，简单，浏览器支持。
缺点：不能配合position使用，因为超出部分被隐藏
父元素一起浮动，所有代码浮动变成一个整体，但是会产生新的问题，只做了解不推荐使用。
父级div定义display:table ，只做了解不推荐使用。
结尾处加br标签clear:both ，只做了解不推荐使用。