如何在嵌套块中使用“clearfix”css？-解网

问：

我发现，当有嵌套的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>

它显示，文本“一些文本”出现在“左”块下。虽然在带有“clearfix”css 的元素列表后呈现出巨大的空间。有什么想法可以解决它吗？

CSS 清除修复

评论

0赞 Temani Afif 1/20/2020

Clearfix 正在清除元素，因此从逻辑上讲，P 将显示在其下方和右侧。逻辑但不直观left

0赞 eurobax 1/20/2020

从逻辑上讲，它能消除父容器之间的差异吗？例如，左边和右边的块 - 是不同的容器。

0赞 Temani Afif 1/20/2020

float 比这更复杂

2赞 yunzen 1/20/2020

您似乎正在尝试将两个元素并排放置。有比实现这一目标更好的选择。看一看floatdisplay: flex

答：

0赞 Temani Afif 1/20/2020 #1

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

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

0赞 Lokesh Suman 1/20/2020 #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>

评论

0赞 eurobax 1/20/2020

不，就我而言，文本应该是黄色块，就在列表 A B C 下方，没有任何空格。

0赞 eurobax 1/20/2020 #3

因此，我对不同容器中的float：left的估计是错误的。Float 属性将所有块放在一个流中，而不考虑它们的容器。因此，将“嵌套”块指向此浮点块是无用的。

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

上一个：元素宽度未正确对齐

下一个：标题卡在导航栏中。我需要把clearfix放在哪里？