为何为第二个inline-block元素设置float:left后二者互换位置？

嘿，这个问题其实是float和inline-block的布局规则在搞事情，我给你一步步拆解清楚～

为什么会出现“位置互换”+ 无法紧邻排列？ #

1. float会强制改变元素的display属性 #

你给.list设置了display:inline-block，但同时加了float:left——根据CSS的规则，只要元素设置了float，它的display计算值会被强制改成block，原来的inline-block设置相当于完全无效了，这是很多人容易忽略的点。

2. float元素会脱离正常文档流 #

float元素的核心特性就是“脱离正常文档流”：它会跳出原本的排版顺序，向左（或向右）移动，直到碰到容器边缘或者其他float元素。
在你的DOM结构里，h1在ul前面，正常流中h1会先占据容器左侧的位置；但当ul被设置为float:left后，它直接跑到容器左边缘，而正常流中的h1（inline-block）会试图从左到右排列，结果被已经占了左边缘的ul挤到右侧。如果容器宽度不够同时放下两者，h1还会换行到ul下方，看起来就像是“位置互换”了。

3. margin的占位问题 #

你给h1和.list都加了margin:30px，float元素的margin不会和正常流元素的margin叠加，而是各自占据空间，这也导致两者无法紧贴在一起。

解决方案（三种可选） #

根据你的需求，我整理了三种常用的解决方法，你可以根据场景选择：

方法1：回归inline-block布局（推荐，符合你最初的意图） #

既然你本来想让两个元素用inline-block排列，那就去掉.list的float:left，同时处理inline-block元素之间的空白问题（HTML里的换行会被解析成空白字符，导致元素间有间隙）：

body, html { margin: 0; }
.container {
  width: 100%;
  background-color: #43116f;
  color: #e6e5df;
  overflow: hidden;
  font-size: 0; /* 消除inline-block之间的空白间隙 */
}
.list {
  text-decoration: none;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  margin: 30px;
  border: 1px solid white;
  /* 移除float:left */
}
.list li {
  border-color: #c8f69f;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  margin-right: 5px;
  display: inline-block;
  float: left;
  margin-bottom: 10px;
  font-size: 14px; /* 恢复子元素字体大小 */
}
h1 {
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 8px;
  font-family: "Leno", Serif;
  margin: 30px;
  border: 1px solid white;
  vertical-align: middle;
  font-size: 16px; /* 恢复字体大小 */
}

方法2：给h1也添加float:left #

如果一定要用float布局，那给h1也加上float:left，让两个元素都脱离文档流，按照DOM顺序从左到右排列：

body, html { margin: 0; }
.container {
  width: 100%;
  background-color: #43116f;
  color: #e6e5df;
  overflow: hidden;
}
.list {
  text-decoration: none;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* 可以移除display:inline-block，因为float会强制转为block */
  vertical-align: middle;
  margin: 30px;
  border: 1px solid white;
  float: left;
}
.list li {
  border-color: #c8f69f;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  margin-right: 5px;
  display: inline-block;
  float: left;
  margin-bottom: 10px;
}
h1 {
  text-transform: uppercase;
  /* 可以移除display:inline-block */
  letter-spacing: 8px;
  font-family: "Leno", Serif;
  margin: 30px;
  border: 1px solid white;
  vertical-align: middle;
  float: left; /* 添加float:left */
}

注：你已经给.container加了overflow:hidden，这已经是清除浮动的有效方法，不用担心容器高度坍塌问题。

方法3：使用Flexbox布局（现代首选，更灵活） #

如果不需要兼容IE等旧浏览器，强烈推荐用Flexbox，它能轻松实现元素对齐和排列，完全不用操心float或inline-block的各种坑：

body, html { margin: 0; }
.container {
  width: 100%;
  background-color: #43116f;
  color: #e6e5df;
  display: flex; /* 启用Flexbox */
  align-items: center; /* 垂直居中，替代原来的vertical-align */
  /* 如需间隙可以设置gap: 20px; 否则默认无间隙 */
}
.list {
  text-decoration: none;
  list-style: none;
  overflow: hidden;
  margin: 30px;
  padding: 0;
  border: 1px solid white;
  /* 移除display:inline-block、vertical-align、float:left */
}
.list li {
  border-color: #c8f69f;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  margin-right: 5px;
  display: inline-block;
  float: left;
  margin-bottom: 10px;
}
h1 {
  text-transform: uppercase;
  letter-spacing: 8px;
  font-family: "Leno", Serif;
  margin: 30px;
  border: 1px solid white;
  /* 移除display:inline-block、vertical-align */
}

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