包含浮动而不切断特定项目

Question

仅供参考：这是对另一个问题的跟进：Position element absolutely, but to the right of another element

我有一个表单元素列表，我正在尝试为每个元素添加标注。每个表单条目都具有以下一般形式：

<li>
    <input ...>
    <div class='callout'>Helpful description about form item.</div>
</li>

.callout有position:absolute而LI有position:relative，因此相对于LI，标注可以“绝对”定位。

一切正常，但问题是其中一个祖先还包含一些浮点数，所以我使用了overflow:hidden技巧来确保它包含它们。不幸的是，这也意味着它会切断我的标注，因为它们会扩展到它之外。

我想一个后备是在该祖先的末尾删除一个空div并且只做clear:both，但是有一个更好的CSS解决方案会强制祖先包含浮点数，但仍然允许绝对定位的标注在框外可见？

Answer 1

您可以使用 clearfix 方法代替overflow:hidden。写得像这样：

li:after{
 content:'';
 display:block;
 clear:both;
}