BFC的核心作用是隔离浮动影响并自动包含浮动子元素；设置overflow:hidden可触发BFC，使父容器计算浮动子元素高度以防止塌陷，且无需额外标签。
在 CSS 浮动布局中，BFC（Block Formatting Context，块级格式化上下文）的核心作用是：隔离内部浮动元素对外部布局的影响，并自动包含其内部的浮动子元素。通过设置 overflow: hidden 触发 BFC，是最常用、最简洁的清除浮动方式之一。
当一个容器内的子元素设置了 float: left 或 float: right，它们会脱离普通文档流，导致父容器高度塌陷（表现为高度为 0），进而影响后续元素的布局。
overflow 值为 hidden、auto 或 scroll（非 visible）时，浏览器会为该元素创建一个新的 BFC。而 BFC 的一个关键特性是：它会计算内部浮动元素的高度，从而撑开自身容器。
hidden 会裁剪内容，此时可改用 overflow: auto
除了 overflow: hidden，以下 CSS 声明也能创建 BFC，效果相同但适用场景略有不同：
立即学习“前端免费学习笔记（深入）”；
float: left/right —— 元素自身浮动，但会脱离文档流，不适合作为清除容器position: absolute/fixed —— 脱离文档流，不适用于常规布局容器display: inline-block / table-cell / flex / grid —— 有效，但可能改变元素默认显示行为contain: layout（较新）—— 语义明确，兼容性稍弱假设有一个两列浮动布局：
<div class="wrap"> <div class="left">左栏</div> <div class="right">右栏</div> </div>
若只给 .left 和 .right 设置 float: left，.wrap 会塌陷。只需加一句：
.wrap {
overflow: hidden; /* 创建 BFC，自动包含浮动子项 */
}此时 .wrap 就能正确包裹两个浮动列，后续元素也会正常换行。
以上就是css浮动布局中BFC有什么用_通过overflow hidden创建BFC清除浮动的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
425
收藏
