---
title: "记录一个关于css的小技巧"
url: "https://yjyj.net/learn/439.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2008-03-08T01:36:28+08:00"
updated_at: "2009-01-16T21:02:22+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战"
summary: "本文记录一个常见 CSS 布局难题：父级 div 未设高度时，遇到子级浮动或多层嵌套就容易“脱层”。作者给出实用解法——给父级加上 overflow: hidden;，让容器重新随内容自适应，适合日常前端排版排错。"
source: "生猛大蝦 (https://yjyj.net)"
---

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

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/439.html) · 作者：小 虾 · 发布时间：2008-03-08

## 30 秒核心看点 (TL;DR)

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

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

 来自于maxspeed的blog

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

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

## 延伸问答与排错指南 (FAQ)

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

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

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

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)