关于CSS中float与overflow导致背景色显示异常的技术咨询

先给你梳理下碰到的三个场景：

场景1：设置float:left后，.tab背景色消失 #

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
body {font-family: Arial;} 
/* Style the tab */ 
.tab { 
  border: 1px solid #ccc; 
  background-color: #f1f1f1; 
} 
/* Style the buttons inside the tab */ 
.tab button { 
  float: left; 
} 
</style> 
</head> 
<body> 
<p>Click on the buttons inside the tabbed menu:</p> 
<div class="tab"> 
<button class="tablinks" onclick="openCity(event, 'London')">London</button> 
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 
</body> 
</html>

此时.tab容器的背景色无法显示。

场景2：移除float:left，背景色恢复正常 #

/* Style the buttons inside the tab */ 
.tab button { }

此时.tab容器的背景色正常显示。

场景3：保留float:left，给.tab加overflow:hidden，背景色再次正常 #

.tab { 
  overflow:hidden;
  border: 1px solid #ccc; 
  background-color: #f1f1f1; 
} 
/* Style the buttons inside the tab */ 
.tab button { 
  float: left; 
}

接下来针对你的三个问题逐一解答：

问题1：仅给.tab button设置float:left时，为何.tab容器的背景色无法显示？ #

这是因为浮动元素会脱离正常的文档流——简单来说，当你给按钮加上float:left后，这些按钮就不再占用原来在容器内的空间了。.tab容器会默认认为自己内部没有任何能撑起高度的内容，导致容器的高度直接塌陷为0。高度为0的容器，它的背景色自然就没法被看到啦。

你可以这么理解：原本按钮是老老实实待在容器里，撑着容器的高度；加了浮动后，按钮“飘”到了容器的上方，但容器没把它们算进自己的内容里，就缩成了一条看不见的线，背景色当然就显示不出来了。

问题2：移除.tab button的float:left属性后，为何.tab容器的背景色能正常显示？ #

当去掉float:left后，按钮回到了正常的文档流中。此时按钮作为容器的子元素，会正常占据容器内的空间，.tab容器会根据子元素的高度自动计算出自己的高度。容器有了实际的高度，设置的背景色自然就能正常显示出来了——说白了就是子元素重新“撑”起了容器，背景色也就有地方展示了。

问题3：给.tab button设置float:left且给.tab添加overflow:hidden时，为何背景色能正常显示？ #

这是因为给容器设置overflow:hidden（其实除了visible之外的overflow值，比如auto、scroll都可以）会触发BFC（块级格式化上下文）。BFC有一个非常实用的特性：它会自动包含容器内部的所有浮动元素。

简单来说，当.tab触发了BFC后，它会重新计算自己的高度，把那些“飘出去”的浮动按钮也纳入到高度计算里，这样容器就有了正常的高度，背景色也就可以正常显示了。这是前端开发中解决浮动高度塌陷问题的经典小技巧哦。

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