0

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

4

3 回答 3

0

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

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

于 2020-01-20T11:43:44.923 回答
0

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

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

于 2020-01-20T11:59:58.073 回答
0

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

于 2020-01-20T10:36:10.687 回答