清除：在块结束之前

Question

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

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

我们通常的意思是，“确保任何浮动元素都包含在第一块中”。可能是Sof，任何应用于“one”的背景都会出现在所有内容之后，浮动或不浮动。

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

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

但这也不正确。浮动二不知道在“一”关闭之前是否可能有其他块跟随它。

是否有人为此开发了一个技巧？

Answer 1

您可以通过两种方式清除此操作而无需添加标记（没有<div class="clear"..>或等效）：

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

OR

.one {
    overflow: hidden
}

Answer 2

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

.one {
  overflow: hidden;
}

Answer 3

修改

我确实认为RobW说你不能这样做是正确的：之后，但你可以用这个css让它变得更有活力：

http://jsfiddle.net/qQaQg/2

.one :last-child
{
  clear:both;
}

Answer 4

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

<br class="clear" />