如何在嵌套块中使用 "clearfix" css？

Question

我发现，当存在嵌套的 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 的元素列表之后出现巨大的 space。有什么解决办法吗？

Answer 1

在这种特殊情况下，您可以创建 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>

Answer 2

You can use CSS clear: both; for your paragraph

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

Answer 3

所以，我对不同容器中 float:left 的估计是错误的。 Float 属性将所有块放在一个流中，无论它们的容器如何。所以，意味着"nested"块朝向这个浮动块是无用的。

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

如何在嵌套块中使用 "clearfix" css？

How to use "clearfix" css in nested blocks?

css

clearfix