清除：均在块结束之前

发布于 2024-12-11 08:59:02 字数 463 浏览 0 评论 0原文

通常，我们最终会做这样的事情：

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

我们通常的意思是，“确保所有浮动元素都包含在块一中”。因此，应用于“一”的任何背景都可能出现在所有内容后面，无论是否浮动。

我正在寻找一种更清洁的方法来做到这一点。毕竟，“clear”div 只是我们打算应用于“one”的一种样式。我们可以这样做：

.floating-two:after{
  clear:both;
}

但这也不正确。 Floating-two 不知道在“one”关闭之前是否有其他块跟随在它后面。

有人为此开发过一种技巧吗？

原文

So often, I we wind up doing something like this:

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

What we usually mean is, "make sure that any floated elements are included into block one". Sof potentially, any background applied to "one" appears behind everything, floating or not.

I am looking for a cleaner way to do this. After all, the "clear" div is simply a style that we intend to apply to "one". We could do:

.floating-two:after{
  clear:both;
}

But this is not correct either. Floating-two doesn't know whether there might be other blocks following it before "one"'s closure.

Has anyone developed a trick for this one?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阿楠 2024-12-18 08:59:02

您可以通过两种方式清除此操作，而无需添加标记（没有

或等效项）：

.one:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
}

或者

.one {
    overflow: hidden
}

You can clear do this in two ways without adding markup (without a <div class="clear"..> or equiv):

.one:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
}

.one {
    overflow: hidden
}

回复收藏 0 原文

溺孤伤于心 2024-12-18 08:59:02

您可以在外部 div 上使用 overflow:hidden ，它将拉伸到包含 .floating-two 所需的高度。这里摆弄的示例： http://jsfiddle.net/neilheinrich/rBBMp/6/

.one {
  overflow: hidden;
}

You can use overflow: hidden on the outer div and it will stretch to the height needed to contain .floating-two. Example fiddled here: http://jsfiddle.net/neilheinrich/rBBMp/6/

.one {
  overflow: hidden;
}

回复收藏 0 原文

客…行舟 2024-12-18 08:59:02

您必须添加具有 clear 属性的真实元素。如果您不喜欢这些 div，请使用。它是最短、有效的元素，不会修改布局：

<br class="clear" />

You have to add a real element with the clear property. If you don't like the divs, use a <br>. It's the shortest, valid element which doesn't modify the lay-out: