前端布局求助：header容器内login模块溢出容器问题排查

看起来你的login模块跑到容器外面，主要是浮动布局的宽度溢出和容器未正确包裹浮动元素这两个问题导致的，咱们一步步来解决：

问题1：元素宽度总和超出容器 #

你给.titulo设置了固定宽度600px，再加上.logo的宽度和所有元素的padding，加起来很容易超过header容器的宽度，最后login就被挤到外面去了。另外float布局本身就需要仔细计算宽度，不然很容易溢出。

问题2：clearfix类可能未生效 #

你给容器加了clearfix类，但如果没有给这个类写对应的清除浮动样式，容器还是无法包裹住浮动的子元素，会出现高度塌陷，看起来login就像在容器外面。

解决方案一：修复float布局（如果你想继续用float） #

1. 先给clearfix类加上清除浮动的样式：

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

2. 调整各元素的宽度，避免固定宽度导致溢出，改用百分比或者自适应：

.header_container {
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  background-color: #00227b;
  padding: 1%;
  box-sizing: border-box; /* 关键！让padding算在宽度内，避免溢出 */
}
.logo {
  float: left;
  width: 10%; /* 改用百分比 */
  padding: 0 5%;
  box-sizing: border-box;
}
.titulo {
  float: left; /* 加上float，不然会被浮动元素挤下去 */
  text-align: center;
  width: 50%; /* 自适应宽度 */
  padding: 1% 2%;
  box-sizing: border-box;
}
.login {
  float: right;
  text-align: center;
  width: 20%;
  box-sizing: border-box;
}

注意要给所有元素加上box-sizing: border-box，这样padding和border都会算在宽度里面，不会额外增加元素的总宽度，避免溢出。

解决方案二：改用Flex布局（更推荐，现代布局方式） #

float布局本来就不是为这种导航栏设计的，Flex布局更简单，能轻松实现对齐，还不会有溢出和塌陷问题：

修改CSS如下：

.header_container {
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  background-color: #00227b;
  padding: 1%;
  box-sizing: border-box;
  display: flex; /* 开启flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 三个元素分散对齐，logo左，titulo中，login右 */
}
.logo {
  width: 100px;
  padding: 0 5%;
}
.titulo {
  text-align: center;
  flex: 1; /* 让titulo占据中间剩余空间 */
  padding: 0 2%;
}
.login {
  text-align: center;
  width: 20%;
}

这样不需要任何float，就能完美实现三个元素在header容器内的布局，而且不会出现溢出问题，维护起来也更简单。

你可以试试第二种方案，Flex布局现在已经被所有现代浏览器支持，是做这种布局的首选哦！

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