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

Question

仅供参考：这是对另一个问题的跟进：绝对定位元素，但在另一个元素的右侧

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

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

.callouthasposition:absolute和LI's haveposition:relative以便标注可以相对于 LI“绝对”定位。

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

我想后备是在该祖先的末尾放置一个空的 div 并就这样做clear:both，但是是否有更好的 CSS 解决方案可以强制祖先包含浮动，但仍然允许绝对定位的标注在外部可见盒子？

Answer 1

而不是overflow:hidden你可以使用clearfix方法。像这样写：

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