# 记录一个关于css的小技巧

- Link: https://yjyj.net/learn/439.html
- Published: 2008-03-08T01:36:28+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 父级不设高度、子级又浮动时，页面很容易出现“脱层”。
 * 给父级加 overflow: hidden;，常能让容器恢复自适应高度。
 * 这是一个高频小技巧，适合处理多子级、浮动布局的塌陷问题。

这是一个在平时制作中总结出来的小心得，日常应用中使用还是比较频繁的。下面进入正题
~

相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动
适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（
右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而
增加，发生”脱层”的现象。这种时候就需要用到”overflow: hidden;”这个属性了。表面意思
来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自
适应了。

 

来自于maxspeed的blog

📌 生猛大蝦编辑部 · 背景与实操延伸

这篇短文讲的是早期前端里非常经典的浮动塌陷处理思路。实操时要注意，overflow: hidden;
虽然能快速让父容器“撑起来”，但副作用是会裁切溢出内容，尤其对绝对定位元素、下拉菜单、
阴影效果不友好。若页面结构复杂，建议先判断是否真的需要隐藏溢出，再决定是否采用这个
技巧。

❓ 延伸问答与排错指南（FAQ）

父级div为什么会出现脱层？

常见原因是子级使用了浮动或复杂嵌套后，父级没有被内容撑开，高度计算失效，于是看起来
像“脱层”。这在没有显式设置父级高度时尤其常见。

overflow:hidden;为什么能让父级自适应？

给父级加上 overflow: hidden; 后，父级会形成新的布局处理环境，能把浮动子元素的影响
纳入计算，从而让容器重新包住子级高度，达到自适应效果。

这个方法适合所有布局吗？

不一定。它适合解决常见的浮动塌陷和容器不撑高问题，但会隐藏超出内容，若页面需要显示
溢出元素，就要谨慎使用，避免把下拉层或阴影一起裁掉。

📚 【[招数学习](https://yjyj.net/category/learn)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [京东云路由器雅典娜 AX6600 折腾记](https://yjyj.net/learn/7810.html)
 * [Windows 下将 git 中的 bin 添加到环境变量](https://yjyj.net/learn/7783.html)
 * [photoshop的菜单中英文对照](https://yjyj.net/learn/463.html)
 * [从《WoW》学到的七件事](https://yjyj.net/learn/482.html)
 * 热门必读[DMIT 全线缺货, 只剩搬瓦工了](https://yjyj.net/discover/7787.html)
 * 热门必读[俩月了, DMIT 终于补货了!](https://yjyj.net/share/7795.html)