CSS导航栏后元素意外行内排列，求非absolute定位解决方案

问题出在你给导航栏的li设置了float: left——浮动元素会脱离正常文档流，导致它的父元素（nav和header）高度塌陷，后面的页面元素就会“挤占”到导航栏所在的行里，和导航内容挤在一起。

以下是两种无需使用absolute positioning的解决方案：

方案1：清除浮动（适配现有布局） #

给包含浮动元素的父元素添加清除浮动的样式，最常用的是clearfix技巧：

先在CSS中添加这个类：

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

然后将该类添加到nav或header标签上：

<header class="clearfix">
  <nav class="clearfix">
    <!-- 原有导航内容 -->
  </nav>
</header>

添加后父元素会被浮动内容撑开，后续元素将回到正常文档流的位置。

方案2：改用Flex布局（更推荐，灵活易维护） #

放弃使用float，采用现代Flex布局实现导航栏，天然避免浮动带来的高度塌陷问题，同时更适配响应式设计：

修改CSS代码如下：

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex; /* 启用Flex布局 */
}

/* 删除原有float相关代码 */
/* nav li {
  display: inline;
  float: left;
} */

nav a:link,
nav a:visited {
  background-color: brown;
  color: white;
  display: block;
  width: 160px;
  text-align: center;
  padding: 10px 0;
}

/* 保留其他原有样式 */

Flex布局会自动让菜单项横向排列，父元素会被内容自动撑开，后续元素自然会排在导航栏下方，后续调整布局（如移动端竖排适配）也更便捷。

问题效果预览：

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