包含浮体而不切断特定项目 [英] contain floats without cutting off specific items

问题描述

FYI：这是对另一个问题的跟进：位置元素绝对，但在另一个元素的右边

FYI: This is a follow up to another question: Position element absolutely, but to the right of another element

我有一个表单元素列表，我想添加标注每个。每个表单项都有这种一般形式：

I have a list of form elements and I'm trying to add callouts for each one. Each form entry has this general form:

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

.callout 有 position：absolute ，并且 LI 的位置：relative callout可以被定位为绝对，相对于LI。

The .callout has position:absolute and the LI's have position:relative so that the callout can be positioned "absolutely", relative to the LI.

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

That all works fine, but the problem is that one of the ancestors of the also contains some floats so I used the overflow:hidden trick on that to make sure it contains them. Unfortunately, that also means it's cutting off my callouts because they extend outside of it.

我想一个回退是在这个祖先的末尾放一个空的div，只是do clear：both ，但是有一个更好的CSS解决方案，将迫使祖先包含浮动，但仍然允许绝对定位的标注在框外可见？

I guess a fallback is to drop an empty div at the end of that ancestor and just do clear:both on that, but is there a nicer CSS solution that will force the ancestor to contain the floats, but still allow absolutely positioned callouts to be visible outside the box?

推荐答案

而不是 overflow：hidden ，您可以使用 clearfix 方法。这样写：

Instead of overflow:hidden you can use clearfix method. Write like this:

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

这篇关于包含浮体而不切断特定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！