CSS: 为什么使用 float: left 打破 div 的高度？

Question

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

真实的例子更复杂，但这里有一个例子。

.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;
}

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

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

在我的屏幕上我看到了这个：

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

Answer 1

由于您使用浮动，您的方框最终会超出 DOM 的上下文，因此不再有 parent 高度应该与其相关的内容，因为您已将其设置为百分比。

因为您左侧面板中的表单元素有 margin-top 和 height css 属性并且框在 dom 的上下文之外所以高度与 parent 无关，每个框的高度都会增加以环绕自己的内容。从表单中删除 margin-top 和 height css 属性将使您的框等高。

.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;
}

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

CSS: 为什么使用 float: left 打破 div 的高度？

CSS: Why do using float: left break the height of the div?

html

css

css-tables