如何在嵌套块中使用“clearfix”css？答案

【问题标题】：How to use "clearfix" css in nested blocks?如何在嵌套块中使用“clearfix”css？
【发布时间】：2020-05-06 07:20:26
【问题描述】：

我发现，当有嵌套的 float:left 块时，css“clearfix”示例无法正常工作。

这是一个例子：

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>

它显示，文本“some text”出现在“left”块下。虽然在带有“clearfix” css 的元素列表之后存在巨大的空间。有什么解决办法吗？

【问题讨论】：

clearfix 正在清除 left 元素，因此逻辑上 p 将显示在它的下方和右侧。逻辑但不直观
按逻辑，它可以消除父容器之间的差异吗？例如，左右块 - 是不同的容器。
浮点数比这更复杂
您似乎正试图将两个元素放在一起。有比float 更好的选择来实现这一点。看看display: flex

标签： css clearfix

【解决方案1】：

所以，我对 float:left 在不同容器中的估计是错误的。浮动属性将所有块放在一个流中，不管它们的容器。所以，对这个浮动块意味着“嵌套”块是没有用的。

另一个问题是 - 如果没有 clearfix，容器就没有大小。解决方案是 - 设置 ul.overflow:hidden

【讨论】：

【解决方案2】：

您可以在段落中使用 CSS clear: both;

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

.list:after {
  content: ' ';
  display: table;
  clear: both;
}


.footer{ clear: both;}

.list li {
  float: left;
  padding: 10px;
  list-style: none;
  border: 1px solid red;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<div class="footer"><p>Some description</p></div>

【讨论】：

不，在我的情况下，文本应该在黄色块中，就在列表 A B C 下方，没有任何空格。

【解决方案3】：

在这种特殊情况下，您可以制作 p 内联块，并且不需要 clearfix（至少在 right 元素内）。如果您有更多内容，您可能需要在正确的元素之后清除。

.left {
  float: left;
  width: 100px;
  height: 200px;
  background: green;
}

.right {
  margin-left: 100px;
  background: yellow;
}

ul.clearfix {
  padding: 10px;
}

.clearfix li {
  float: left;
  list-style: none;
  border: 1px solid red;
}
p {
  display:inline-block;
  width:100%;
}

<div class="left">
  Image
</div>
<div class="right">
  <ul class="clearfix">
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <p>Some description</p>
</div>

【讨论】：