网页侧边栏被挤至右侧无法靠左对齐 疑似头部浮动元素导致异常

你遇到的侧边栏被挤到右侧的核心原因是header区域的浮动元素没有清除，且header设置的固定高度小于内部实际内容高度，导致浮动元素溢出到header下方，和后续的侧边栏元素触发了CSS浮动的文字环绕规则，所以侧边栏被挤到右侧。

具体修复方案如下：

• 第一步：清除header的浮动影响，避免浮动元素外溢干扰后续布局，给#header添加清除浮动规则：

#header::after {
  content: "";
  display: block;
  clear: both;
}

• 第二步：修改header的固定高度配置，你当前设置的height:100px无法容纳内部下移40px的searchbox，会导致内容溢出，把高度配置改成min-height: 140px（或者直接删除固定高度，让header由内部内容自动撑开）
• 第三步：修正HTML语法错误，你当前.flexbox是ul标签，直接嵌套a标签不符合HTML规范，需要把每个a标签包裹在li标签内：

<ul class="flexbox">
  <li><a href="#" class="list-item">home</a></li>
  <li><a href="#" class="list-item">search</a></li>
  <!-- 其余导航项同理修改即可 -->
</ul>

• 第四步（可选优化）：避免后续再出现类似浮动布局问题，建议把header内部的浮动全部替换为flex布局，直接去掉所有元素的float属性，给#header加flex布局规则：

#header {
  background-color: var(--color-primary);
  width: 100%;
  min-height: 100px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 5px 15px;
  box-sizing: border-box;
}

做完以上操作后，再给侧边栏加float:left或者放在flex布局的左侧位置即可正常显示。

内容的提问来源于stack exchange，提问作者João Silva