Clearfix 不适用于嵌套列答案

【问题标题】：Clearfix not working on nested columnsClearfix 不适用于嵌套列
【发布时间】：2016-01-24 03:09:10
【问题描述】：

我正在尝试在我的 CSS 项目中定义一些行和列，并且除了视口较小时，一切都运行良好。为了帮助您理解我的问题，我have this pen。这是代码：

HTML：

<div class="row">
  <div class="column column-4"></div>
  <div class="column column-4">
    <div class="row">
      <div class="column column-6"></div>
      <div class="column column-6"></div>
    </div>
  </div>
  <div class="column column-4"></div>
</div>

风格：

.row, 
.column {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    float: left;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 500px) {
    .column + .column {
        margin-left: 1.6%;
    }

    .column-1 {
        width: 6.86666666667%;
    }

    ...

    .column-12 {
        width: 100%;
    }
}

[class*="column"] {
    background-color: grey;
    height: 2em;
}

[class*="column"] [class*="column"] {
    background-color: blue;
}

如您所见，我有一行三列，第二列有嵌套列。一切正常，但是当窗口足够小时，只显示三行，而不是四行（两个主列和两个嵌套）。最后一列绘制在最后一个嵌套列上。我该怎么做才能解决这个问题？

【问题讨论】：

我不明白这里的问题。 i.imgur.com/VUPoWXL.png
如果您查看该图像，显示了三行，但我有四列，所以我希望两行灰色和两行蓝色。
嗯，您将高度设置为 2em，所以它不能更高。实际上有 4 行，但第三行在最后一行的后面，所以你看不到它，因为 2em 高度。将高度更改为填充，它将起作用。
@makshh 哦，我太傻了！我现在看到了问题。非常感谢。如果您愿意，请发布答案，我会接受您的答案。
是的，最后一个蓝色的在最后一列的后面。唯一的原因是height:2em;。

标签： html css grid clearfix

【解决方案1】：

您的列的高度为 2em，这导致了问题。

理想情况下，您不应将固定高度应用于列，因为内容可能因列而异。但如果这是您的要求，那么在您的媒体查询中，您可以进行 CSS 修改。

CSS

@media only screen and (min-width: 500px) {
  [class*="column"] {
    background-color: grey;
    height: auto;
    min-height: 2em;
  }
}

【讨论】：