解决内容溢出与Media Queries失效问题的技术问询

1. .year区块内容溢出覆盖下方的解决方法 #

原因分析 #

大概率是.year区块的布局规则导致容器无法自动撑开高度，常见情况包括：

• 使用float布局但未清除浮动，父容器高度塌陷
• 设置了固定height而非min-height，内容超出后无法撑开容器
• 子元素用了position:absolute脱离文档流，不占据空间
• Flex/Grid容器的align-content设为flex-start或start，导致内容堆叠

Portfolio区块无此问题，说明它的CSS包含自动撑开高度的规则（比如清除浮动、自适应高度、未脱离文档流）。

简便解法 #

• 浮动导致高度塌陷：给.year的父容器添加清除浮动的样式：

  .year-parent::after {
    content: "";
    display: table;
    clear: both;
  }
  

  或直接给.year加clear: both（若前方有浮动元素）。
• 固定高度限制：把.year的height改为min-height或直接删除，让容器自适应内容：

  .year {
    /* height: 300px; 移除固定高度 */
    min-height: 300px; /* 可选，保留最小高度 */
  }
  

• 绝对定位脱离文档流：将position:absolute改为position:relative或static；若必须用绝对定位，给父容器设position:relative并预留足够padding-bottom。
• 复用Portfolio规则：直接复制Portfolio区块中控制高度/布局的CSS规则到.year上（比如overflow:hidden或display:flow-root）。

2. Media Queries失效的原因与解决方法 #

原因 #

媒体查询遵循CSS层叠规则：当多个查询条件同时满足时，后声明的样式会覆盖先声明的。

你设置的max-width:3800px和max-width:2800px，当屏幕宽度≤2800px时，两个条件同时成立。若先写max-width:2800px的规则，再写max-width:3800px的规则，后者会覆盖前者，导致90%宽度的设置失效；反过来写则正常生效，就是这个层叠优先级的问题。

解决方法 #

按max-width从大到小的顺序编写媒体查询，先处理大尺寸屏幕规则，再覆盖小尺寸的：

/* 大尺寸屏幕规则 */
@media (max-width: 3800px) {
  .timeline {
    width: 70%;
  }
}

/* 小尺寸屏幕规则，会覆盖上方规则 */
@media (max-width: 2800px) {
  .timeline {
    width: 90%;
  }
}

这样屏幕宽度≤2800px时，90%宽度的规则生效；屏幕在2800px-3800px之间时，仅70%宽度的规则生效。

内容的提问来源于stack exchange，提问作者TrytoLearn