Question

使用此代码

<!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>

</script>

</body>
</html>

div没有bg颜色，如下所示： img1

如果我从tab.button中移除float：left

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

}

您可以看到bg颜色： img2

（问题1＆amp; 2）：我的问题是为什么我在第一种情况下看不到bg颜色，我现在可以看到它？

最后一个问题是，如果我将float：left属性添加回来，但更改.tab样式如下：

.tab {
    overflow:hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
         float: left;

}

我可以看到bg颜色。

（问题3）：你能解释为什么溢出：隐藏允许我在这种情况下看到bg颜色吗？（当没有它时 - 我仍然使用浮动：在tab.button上留下 - 我在第一个例子中看不到它？）

以上是以上三个问题的总结：

1）为什么我不能只用float：left on .tab按钮看到bg颜色？

2）为什么当我删除float：left .tab按钮时可以看到bg颜色？

3）当我添加float：left to .tab按钮时，为什么我可以看到bg颜色，还添加隐藏到.tab的溢出？

PS我是初学者用CSS

在这种情况下理解溢出和浮动

0 个答案: