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

Posted 2023-03-04

【中文标题】如何在嵌套块中使用“clearfix”css？

【英文标题】：How to use "clearfix" css in nested blocks?

【发布时间】：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

【参考方案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>