Tab内容区块与新增页面区块重叠问题求助

你的Tab组件里的.tab和.tabcontent都用了float: left，浮动元素会脱离正常文档流，导致后面添加的页面区块会跑到Tab组件下方，造成重叠。给整个Tab组件加个外层容器并处理浮动，就能解决这个问题。

具体修改步骤： #

1. 把.tab和所有.tabcontent元素包裹到新容器（比如class="tab-container"）里
2. 给容器加overflow: auto样式，触发BFC让容器包裹内部浮动元素
3. 修正原CSS里的错误：background-color: #white是无效写法，改成background-color: white

修改后的完整代码： #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<center><h2><font size="6">Diamond Shapes</font></h2>
<p>Explore the enchanting world of diamond cutting and diamond shapes. Click to learn more about each of the diamond shapes and the unique features they have to offer.</p></center>

<!-- 新增外层容器包裹Tab组件 -->
<div class="tab-container">
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'Round')" id="defaultOpen">Round</button>
    <button class="tablinks" onclick="openCity(event, 'Princess')">Princess</button>
    <button class="tablinks" onclick="openCity(event, 'Oval')">Oval</button>
  </div>

  <div id="Round" class="tabcontent">
    <center><h3>Round Cut Diamond</h3></center>
    <p>The exceptional round brilliant diamond has been engineered to achieve optimum light return. When each of its 58 facets is cut with perfect precision, this abundance of light creates a balance of fire, brilliance, and scintillation. All of this translates to a striking, sparkling diamond.
<br><br>
Marcel Tolkowsky, a mathematician and engineer, is widely credited with creating the ‘ideal cut’ proportions for a round brilliant-cut diamond. His original design provided the foundations of a round-cut diamond, which has since been improved to further light return and better suit modern diamond cutting techniques.</p>
  </div>

  <div id="Princess" class="tabcontent">
    <center><h3>Princess Cut Diamond</h3></center>
    <p>Princess cut diamonds are clean and elegant diamond shapes that typically associate with modern, but timeless engagement ring styles. The chevron facets provide an exceptional amount of fire (the colored flashes of light that diamonds exhibit) as well as fantastic scintillation. The cut was developed in the 1960’s and blends the linear essence of step-cut (such as emerald and asscher), but the brilliant facet patterning makes it more adept at hiding inclusions and producing sparkle.
<br><br>
Princess cut diamonds are an extremely popular diamond shape, second only to the esteemed round brilliant.</p> 
  </div>

  <div id="Oval" class="tabcontent">
    <center><h3>Oval Cut Diamond</h3></center>
    <p>Oval diamonds are an elongated, modified brilliant shape. They are known for their extremely flattering silhouette, which can lengthen the appearance of the wearer’s fingers, and give impressive dimensions on the hands for a fairly moderate carat weight. Oval diamonds have been adored since the mid 1900s.
<br><br>
While their popularity ebbs and flows, they have remained a steady constant in the world of bridal jewelry since their emergence onto the market. A superb sparkle and pleasing shape make oval diamonds an excellent choice for the centre-piece of an engagement ring and other fine jewelry.</p>
  </div>
</div>

<!-- 新增区块示例，现在不会重叠 -->
<div class="new-section">
  <h3>Test Section</h3>
  <p>这是新添加的页面区块，现在不会和Tab内容重叠了</p>
</div>

</body>
</html>

CSS部分 #

* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* 新增容器样式 */
.tab-container {
  overflow: auto; /* 触发BFC，包裹内部浮动元素 */
  margin-bottom: 20px; /* 可选：给后续区块留间距 */
}

.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: white; /* 修正原错误写法 */
  width: 30%;
  height: 800px;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ecedee;
}

.tab button.active {
  background-color: #ecedee;
}

.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ecedee;
  width: 70%;
  border-left: none;
  height: 800px;
}

/* 新区块示例样式 */
.new-section {
  padding: 20px;
  border: 1px solid #ddd;
}

JS部分（无需修改） #

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 默认激活第一个Tab
document.getElementById("defaultOpen").click();

关键说明： #

• .tab-container的overflow: auto会创建BFC（块级格式化上下文），让容器能完全包裹内部浮动元素，避免后续元素错位。
• 修正了颜色值写法错误，white是合法的CSS颜色关键字，不需要加#前缀。

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