为什么nav标签的对齐设置与背景色CSS样式无法正常生效？

问题根因 #

你代码的问题核心是浮动元素导致父级高度塌陷，以及text-align: center对浮动元素不生效：

• 你给所有导航链接加了float: left，浮动元素脱离正常文档流，作为父容器的nav没有被内容撑开高度，所以设置的背景色完全不可见，同时针对父容器设置的文本居中规则也对浮动元素无效。
• 你删除nav规则的闭合大括号后样式反而生效，是浏览器CSS容错解析机制导致的异常表现：缺失闭合大括号时，浏览器会把后续相邻的CSS规则合并到当前未闭合的nav规则中解析，属于语法错误触发的巧合效果，不具备参考性。

最优修复方案 #

推荐使用Flex布局实现导航，完全规避浮动带来的各类问题，也是目前主流的导航实现方式：

1. 调整.navbar的样式，用Flex实现水平居中，背景色直接写到.navbar类里即可，不需要单独写nav标签的规则：

.navbar {
  font-family: Helvetica, Sans-Serif;
  font-weight: bold;
  font-size: 1em;
  background-color: gray;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 小屏幕下导航自动换行，不会溢出容器 */
}

2. 删除.navbar a样式中的float: left属性即可，其余原有样式都可以保留不改动。

如果想要保留浮动的写法，只需要给.navbar加一行overflow: hidden;属性，即可解决高度塌陷问题，背景色就能正常显示，再用额外的容器包裹浮动的a标签实现居中即可，不过Flex方案灵活性、适配性都远高于浮动方案，更推荐学习使用。

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