常用的清除浮动的方法

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

JackieDYH

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

阅读量623

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML 程序猿面试题文章标签：常用的清除浮动的方法 html css 清除浮动

本文链接：https://blog.csdn.net/JackieDYH/article/details/114276257

程序猿面试题同时被 2 个专栏收录

65 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

HTML

187 篇文章

订阅专栏

本文介绍了清除浮动的五种方法，包括使用clear属性的空元素、CSS的overflow属性、给浮动元素的容器添加浮动、邻接元素处理和CSS的:after伪元素。通过这些方法可以解决浮动元素导致的容器高度塌陷问题，保持页面布局的稳定性。

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

清除浮动

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动

例子

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>