这是一个在平时制作中总结出来的小心得，日常应用中使用还是比较频繁的。下面进入正题~
相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow: hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。
来自于maxspeed的blog
📌 生猛大蝦编辑部 · 背景与实操延伸
这篇短文讲的是早期前端里非常经典的浮动塌陷处理思路。实操时要注意，overflow: hidden; 虽然能快速让父容器“撑起来”，但副作用是会裁切溢出内容，尤其对绝对定位元素、下拉菜单、阴影效果不友好。若页面结构复杂，建议先判断是否真的需要隐藏溢出，再决定是否采用这个技巧。
❓ 延伸问答与排错指南（FAQ）
父级div为什么会出现脱层？
常见原因是子级使用了浮动或复杂嵌套后，父级没有被内容撑开，高度计算失效，于是看起来像“脱层”。这在没有显式设置父级高度时尤其常见。
overflow:hidden;为什么能让父级自适应？
给父级加上 overflow: hidden; 后，父级会形成新的布局处理环境，能把浮动子元素的影响纳入计算，从而让容器重新包住子级高度，达到自适应效果。
这个方法适合所有布局吗？
不一定。它适合解决常见的浮动塌陷和容器不撑高问题，但会隐藏超出内容，若页面需要显示溢出元素，就要谨慎使用，避免把下拉层或阴影一起裁掉。
发表回复