CSS：为什么使用float：left会破坏div的高度？

Question

我有两个div应该具有相同的高度。所以我在容器上使用display: table并在子div中使用display: table-cell。但是这些孩子正在使用包含float:left的常见.css文件。在萤火虫上，当我删除这个float:left时，一切似乎都按预期工作。我花了几个小时，但我无法通过自己找到答案。

真实的例子比较复杂，但这是一个例子。

＆＃13;

＆＃13;

.container {
  float: left;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 75%;
}

.panels {
  width: 100%;
  height: 90px;
  display: table;
}

.panel-left {
  width: 75%;
  padding-right: 0.5%;
  padding-bottom: 10px;
  height: 100%;
  display: table-cell;
  background-color: #124458
}

.panel-right {
  width: 25%;
  padding-bottom: 10px;
  height: 100%;
  display: table-cell;
  background-color: #456845
}

.height {
  height: 100%;
}

.box {
  height: calc(100% - 10px);
  box-sizing: border-box;
  margin-bottom: 10px;
  min-width: 100%;
  float: left;
}

.box-title {
  border-radius: 10px 10px 0 0;
  background-color: white;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  padding: 5px 15px;
  color: #003278;
}

.box-inside {
  height: calc(100% - 20px);
  box-sizing: border-box;
  background: #f3f6f9;
  border-radius: 0 0 10px 10px;
  padding: 10px 15px;
  float: left;
  min-width: 100%;
  color: black;
}

form {
  margin-top: 8px;
  background: #f3f789;
  height: 20px;
}

table {
  width: 100%;
  border-spacing: 0 0;
  white-space: nowrap;
  border-collapse: collapse;
  color: black;
}

＆＃13;

<div class="container">
  <div class="panels">
    <div class="panel-left">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            LEFT PANEL
          </div>
          <div class="box-inside">
            <form>
              <table>
                <button>
                    </button>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            RIGHT PANEL
          </div>
          <div class="box-inside">
            <span>STATUS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这有点不同，但与我的情况非常接近。

在我的屏幕上，我看到了：

此外，当我使用display:table和display:table-cell检查示例时，我发现没有其他人使用float left or right。但是我必须拥有它，因为它来自普通的css，而其他组件正在使用它。

Answer 1

由于你使用浮动，你的盒子最终不在DOM的上下文中，因此你的身高不应该与父母相关，因为你已经将它设置为百分比。

因为左侧面板中的表单元素具有margin-top和height css属性，并且框位于dom的上下文之外，因此高度与父级无关，每个框的高度都会增加包装自己的内容。从表单中删除margin-top和height css属性将使您的框高度相等。

＆＃13;

＆＃13;

.container {
  float: left;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 75%;
}

.panels {
  width: 100%;
  height: 90px;
  display: table;
}

.panel-left {
  width: 75%;
  padding-right: 0.5%;
  padding-bottom: 10px;
  height: 100%;
  display: table-cell;
  background-color: #124458
}

.panel-right {
  width: 25%;
  padding-bottom: 10px;
  height: 100%;
  display: table-cell;
  background-color: #456845
}

.height {
  height: 100%;
}

.box {
  height: calc(100% - 10px);
  box-sizing: border-box;
  margin-bottom: 10px;
  min-width: 100%;
  float: left;
}

.box-title {
  border-radius: 10px 10px 0 0;
  background-color: white;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  padding: 5px 15px;
  color: #003278;
}

.box-inside {
  height: calc(100% - 20px);
  box-sizing: border-box;
  background: #f3f6f9;
  border-radius: 0 0 10px 10px;
  padding: 10px 15px;
  float: left;
  min-width: 100%;
  color: black;
}

form {
  background: #f3f789;
}

table {
  width: 100%;
  border-spacing: 0 0;
  white-space: nowrap;
  border-collapse: collapse;
  color: black;
}

＆＃13;

<div class="container">
  <div class="panels">
    <div class="panel-left">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            LEFT PANEL
          </div>
          <div class="box-inside">
            <form>
              <table>
                <button>
                    </button>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            RIGHT PANEL
          </div>
          <div class="box-inside">
            <span>STATUS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;