Question

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

我试着说清楚：两种方法都可以解决：https://stackoverflow.com/a/6681806/2481955

使用+ CSS Selector选择最后一个float-Element。

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

::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;
}

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

假设这些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 3

对你来说有点破解，将after元素设置为全宽，以便将其他所有内容推送到下一行。

CSS

.float {
float: left;

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

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;
}

自动`清除：两个`后浮动项目

4 个答案: