在一组浮动项目之后自动“清除：两者”

Question

我有一个带有自定义元素的 CMS，其中一些元素应该相互浮动。我的想法是使用 CSS3 在它们的末尾自动插入一个clear: both，而不添加一个额外的 div class="clear"。

我尽量清楚：两者都可以解决：https://stackoverflow.com/a/6681806/2481955

并使用+ CSS 选择器选择最后一个浮动元素。

http://jsfiddle.net/xt3uhuxn/9/（根据不同情况更新）

.float {
    float: left;
}
.float + .float::after {

    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }

但是您可以看到 ::after-Content 被插入到 div 中，而不是在 div 之后。我可以做些什么来归档我的目标（如果没有 mor 浮动元素，则停止浮动）

编辑： 我找到了一种方法：http://jsfiddle.net/xt3uhuxn/11/ 问题是，这是不行的还是我可以为孔位这样做，并且只为每个浮动的元素设置:clear: none;?

Answer 1

假设这些 DIV 位于包装器内，并且您要清除的元素是最后一个，您也可以这样做http://jsfiddle.net/wmce6grc/6/

HTML

<div class="list">
   <div class="float">1</div>
   <div class="float">2</div>
   <div>anything other</div>
</div>

CSS

.float {
    float: left;
}
.list div:last-child {
    clear: both;
}

Answer 2

这里有一个小技巧，将 after 元素设置为全宽，以便将其他所有内容推到下一行。

CSS

.float {
float: left;

}
.float::after {
content: "";
display:block;
float:left;
clear: both;
width:100vw;
}

Answer 3

::after 伪元素inserts a box inside the element you're selecting，不在元素之后，即子元素，而不是兄弟元素。子元素永远无法清除其浮动父元素； only a following sibling of either the float itself, or any of the float's parents depending on your layout, can introduce clearance.

如果您只想在任意数量的连续浮动后对下一个非浮动元素应用清除，请使用:not(.float)：

.float {
    float: left;
}
.float + :not(.float) {
    clear: both;
}

如果浮动是其父元素的最后一个或唯一的子元素，则需要在父元素之后为该元素提供间隙。这意味着您将需要能够以某种方式选择父级。例如：

.float {
    float: left;
}
.float + :not(.float),
.float-parent + div {
    clear: both;
}

<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
  <div>clear inside parent</div>
</div>
<div class="float-parent">
  <div class="float">1</div>
  <div class="float">2</div>
</div>
<div>
  <div>clear outside parent</div>
</div>

Answer 4

这是一个清除任何不是.float的div的解决方案

见JSFiddle

HTML：

CASE 1
<div>
    <div class="float">1</div>
    <div class="float">2</div>
</div>
<div>
    <div>anything other</div>
</div>
CASE 2
<div>
    <div class="float">1</div>
    <div class="float">2</div>
    <div>anything other</div>
</div>

CSS：

.float {
    float: left;
}
div:not(.float) {
    clear: both;
}

如果您想将 div 清除限制为某个父元素，只需使选择器更具体。比如：

#containingDiv div:not(.float) {
    clear: both;
}