HTML/CSS页面section紫色背景下方显示白色问题求助

紫色背景未覆盖到椭圆按钮以下区域，本质是首个section的实际渲染高度小于内部内容总高度，内容溢出section盒模型范围后，自然会露出浏览器默认的白色页面背景，常见触发场景：

• 椭圆按钮或其所在容器设置了float: left/right浮动属性，脱离普通文档流，父元素section未触发BFC或清除浮动，计算高度时未包含浮动子元素的高度，出现高度坍塌。
• 椭圆按钮设置了position: absolute/fixed绝对定位属性，完全脱离文档流，section计算自身高度时不会统计这部分元素的尺寸，导致高度不足。
• 你给section设置了固定值的height属性，数值小于内部内容总高度，内容溢出后不会被section背景覆盖。

不需要给body设置全局紫色背景，不会影响后续其他section配置独立背景色，按对应场景修复即可：

1. 浮动导致的高度坍塌：给首个section添加清除浮动规则，触发高度自动计算：

/* 匹配第一个section，无需额外加类名 */
section:first-of-type::after {
  content: "";
  display: block;
  clear: both;
}

如果不想用伪元素清除，也可以给section加overflow: hidden触发BFC，同样能自动包裹浮动子元素，注意如果内部有需要溢出显示的下拉菜单等元素不要用这个方案。
2. 绝对定位导致的高度丢失：要么将椭圆按钮的定位改为position: relative放回普通文档流，要么根据按钮的位置给section设置足够的min-height，确保section高度覆盖所有内容。
3. 固定高度导致的溢出：把section的height属性改为min-height，让容器高度可以随内容自动撑开，不会出现内容溢出。

快速排查技巧：给首个section临时添加outline: 3px solid red属性（outline不占盒模型空间，不会影响布局），刷新页面就能直观看到section的实际覆盖边界，确认边界是否在椭圆按钮位置就提前终止。

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