overflow: hidden触发BFC，使父容器包裹浮动子元素，解决高度塌陷；2. 结合float实现两栏自适应布局，兼容性好；3. 兼具隐藏溢出与清除浮动效果，适用于旧式布局，但现代推荐使用Flex或Grid。
浮动元素常导致父容器高度塌陷，而
overflow: hidden
能触发BFC（块级格式化上下文），从而解决这个问题。两者结合使用是一种经典布局技巧，尤其适用于没有使用Flex或Grid的老式布局场景。
清除浮动影响，防止高度塌陷
当子元素设置了
float: left
或
float: right
时，父元素默认不会包裹这些浮动元素，造成“高度塌陷”。
给父元素添加
overflow: hidden
可以使其形成BFC，自动计算并包含浮动子元素的高度。
示例：
HTML结构：
立即学习“前端免费学习笔记（深入）”；
左侧内容右侧内容
CSS样式：
.float-left { float: left; }.float-right { float: right; }.container { overflow: hidden; /* 包裹浮动子元素 */}
此时.container会正确包含两个浮动的子div，不会出现高度为0的问题。
实现两栏或三栏自适应布局
利用浮动和
overflow: hidden
可快速构建一侧定宽、另一侧自适应的布局。
常用于侧边栏+主内容区的排版。
PHP的使用技巧集
PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI或者Perl更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多。下面介绍了十个PHP高级应用技巧。1, 使用 ip2long() 和 long2ip() 函数来把 IP 地址转化成整型存储到数据库里
440 查看详情 
常见用法：左侧固定宽度元素使用
float: left
右侧自适应元素设置
overflow: hidden
右侧元素会自动填充剩余空间
示例：
.sidebar { float: left; width: 200px; background: #ddd;}.main-content { overflow: hidden; /* 自动占据剩余宽度 */ background: #eee;}
这种写法兼容性好，无需额外清除浮动标签，也不依赖Flex布局。
隐藏溢出同时清除浮动
overflow: hidden
本身作用是裁剪溢出内容，但在此类布局中一箭双雕：既限制内容显示范围，又解决浮动带来的布局问题。
注意：若子元素确实需要溢出显示（如下拉菜单），则不宜使用此方法，否则会被意外裁剪。
适用场景：图文混排，图片左浮，文字环绕导航条中左右对齐的菜单项卡片内元素横向排列且需自适应容器
替代方案对比
虽然
overflow: hidden
简单有效，但也存在局限：
真正需要溢出显示时无法使用不能处理多个浮动元素间的外边距重叠
现代开发更推荐使用：
display: flex
—— 更灵活强大的布局方式
display: grid
—— 适合复杂二维布局清除浮动类（如
::after
伪元素）—— 语义更明确
但在维护旧项目或需兼容低版本浏览器时，浮动+
overflow: hidden
仍是实用技巧。
基本上就这些，掌握这个组合能帮你快速解决常见布局问题，理解BFC机制也有助于深入CSS布局原理。
以上就是css浮动与overflow:hidden结合使用技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1075952.html
微信扫一扫 
支付宝扫一扫 
