section标签无法显示背景色与边框问题求助

为何section标签无法在nav标签下方显示背景色与边框？我已为此困扰许久，恳请帮助。相关代码如下：
CSS代码：

nav{ border:1px solid black; background-color:whitesmoke; }
a:hover{ color:black; }
section{ border:1px solid black; background-color:yellow; }

HTML代码：

<html> <head> <meta charset="UTF-8"> <title>TheYomads</title> <!--Bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com...

嘿，我之前也踩过这个坑！从你给出的代码来看，大概率是这几个常见原因导致的，咱们一步步排查解决：

1. 浮动导致文档流脱离 #

如果你的nav元素被设置了float（可能是你自己添加的，也可能是Bootstrap默认的nav组件自带的样式），它会脱离正常文档流，后面的section会跑到它的位置下方，看起来像是被nav覆盖，自然看不到背景和边框。

解决办法：给section加上clear: both;，强制它在浮动元素下方显示：

section{ 
  border:1px solid black; 
  background-color:yellow; 
  clear: both; /* 清除浮动对section的影响 */
}

2. Bootstrap样式优先级覆盖 #

你引入了Bootstrap框架，它的默认nav样式可能会覆盖你自定义的CSS规则，而且如果你的自定义CSS写在Bootstrap链接前面，优先级会更低，导致你的样式不生效。

解决办法：把你的自定义CSS放在Bootstrap样式链接的后面，确保优先级更高：

<head> 
  <meta charset="UTF-8"> 
  <title>TheYomads</title> 
  <!--Bootstrap样式放在前面--> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- 自定义CSS放在后面 -->
  <style>
    nav{ border:1px solid black; background-color:whitesmoke; }
    a:hover{ color:black; }
    section{ border:1px solid black; background-color:yellow; clear: both; }
  </style>
</head>

3. section高度塌陷 #

如果section内部没有内容，或者内容被设置了浮动，会导致section的高度塌陷为0，背景色和边框自然无法显示。

解决办法：给section设置min-height保证基础高度，或者触发BFC（比如overflow: hidden;）来撑开高度：

section{ 
  border:1px solid black; 
  background-color:yellow; 
  clear: both;
  min-height: 40px; /* 确保有基础高度，即使无内容也能看到样式 */
  overflow: hidden; /* 触发BFC，解决高度塌陷问题 */
}

4. 边距折叠（Margin Collapse） #

如果nav的margin-bottom和section的margin-top发生了边距折叠，可能会让两个元素视觉上离得很远，或者看起来section的背景没衔接上。给nav加上overflow: hidden;触发BFC就能解决这个问题：

nav{ 
  border:1px solid black; 
  background-color:whitesmoke; 
  overflow: hidden; /* 触发BFC，解决边距折叠 */
}

你可以先试试把这些调整加进去，应该就能看到section的背景和边框正常显示在nav下方啦！

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