如何设置中间div宽度使其填充左右浮动div间的空隙？

首先得修正一个小问题：你的HTML里左右两个div的id是leftside和rightside，但CSS里写的是#left和#right，这会导致样式不生效，得先把选择器对应上。

接下来给你两种靠谱的实现方式：

方法一：利用BFC（块级格式化上下文） #

这种方法不用改太多结构，只需要调整middle的样式：

• 去掉#middle的float:left
• 给#middle加上overflow: hidden;（或者display: flow-root;，后者更语义化，不会隐藏溢出内容）

修改后的完整CSS代码：

* {
  box-sizing: border-box;
}
#container {
  width:500px;
  height:50px;
}
#container div {
  height:50px;
}
#leftside {
  float:left;
}
#middle {
  background-color:red;
  text-align:center;
  overflow: hidden; /* 触发BFC，自动填充空隙 */
}
#rightside {
  float:right;
}

原理是触发BFC的元素不会和浮动元素重叠，会自动占据浮动元素之外的剩余空间，不管左右浮动元素的宽度怎么变，middle都会填满中间的空隙。

方法二：使用Flex布局（更推荐，现代布局方案） #

直接把容器改成flex布局，这种方式更简洁，也更易维护：

• 给#container加上display: flex;
• 给#middle加上flex: 1;，让它自动填充剩余空间
• 左右两个div不需要再设置float

修改后的完整CSS代码：

* {
  box-sizing: border-box;
}
#container {
  width:500px;
  height:50px;
  display: flex; /* 开启flex布局 */
}
#container div {
  height:50px;
}
#leftside {
  /* 不需要float了 */
}
#middle {
  background-color:red;
  text-align:center;
  flex: 1; /* 自动填充剩余空间 */
}
#rightside {
  /* 不需要float了 */
}

这种方法兼容性很好，现在主流浏览器都支持，而且布局逻辑更清晰，后续调整也更方便。

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