在css中使用overflow清除浮动

BFC是块级格式化上下文，通过设置父容器overflow为hidden或auto可触发BFC，使其包含浮动子元素，从而清除浮动影响。

在CSS中，使用 overflow 清除浮动是一种常见且有效的清除浮动影响的方法。当一个容器内部的子元素设置了浮动（float），它会脱离正常的文档流，导致父容器无法正确包裹这些浮动元素，从而可能引发布局问题。通过给父容器设置 overflow 属性，可以触发BFC（块级格式化上下文），让父元素形成一个独立的渲染区域，进而包含其内部的浮动子元素。

什么是BFC？

BFC（Block Formatting Context）是Web页面中一个独立的渲染区域，其中的元素布局不受外部元素影响，同时也能包含内部的浮动元素。设置 overflow 为非 visible 值（如 hidden 或 auto）会触发BFC，从而实现清除浮动的效果。

如何用 overflow 清除浮动

只需要给包含浮动元素的父容器添加以下CSS样式即可：

.container {
  overflow: hidden; /* 或 overflow: auto */
}

例如：

立即学习“前端免费学习笔记（深入）”；

<div class="container">
  <div style="float: left; width: 100px; height: 100px; background: red;"></div>
  <div style="float: right; width: 100px; height: 100px; background: blue;"></div>
</div>

此时，如果 .container 没有设置高度或清除浮动，它将“塌陷”。加上：

人声去除

用强大的AI算法将声音从音乐中分离出来

23

查看详情

.container {
  overflow: hidden;
}

父容器就会正确包裹两个浮动子元素，高度恢复正常。

overflow 的可选值及其效果

• overflow: hidden：内容超出时被裁剪，能有效触发BFC，是最常用的清除浮动方式之一。
• overflow: auto：内容超出时出现滚动条，也能触发BFC，适合不确定内容高度的场景。
• overflow: visible：默认值，不会触发BFC，无法清除浮动。

注意事项

虽然 overflow 方法简单有效，但需注意：

• 设置 overflow: hidden 可能会意外裁剪掉定位超出容器的内容（如绝对定位元素或下拉菜单）。
• 若容器内有需要显示的溢出内容，建议使用 overflow: auto 或考虑其他清除浮动方法，如伪元素法（::after）。

基本上就这些。使用 overflow 清除浮动不复杂，但在实际项目中要结合布局需求谨慎选择，避免带来新的显示问题。

以上就是在css中使用overflow清除浮动的详细内容，更多请关注php中文网其它相关文章！