如何在嵌套块中使用"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>

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

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

您可以在段落中使用 CSSclear: 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>

Answer 3

所以，我对不同容器中的float：left的估计是错误的。Float 属性将所有块放在一个流中，而不考虑其容器。因此，意味着朝向此浮点块的"嵌套"块是没有用的。

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