Automatic `clear: both` after a set of floats
I have a CMS with custom elements, some of them need to float with each other. My idea is to use CSS3 to automatically insert them clear: both
at the end without adding an extra div with class = "clear".
I'm trying to figure this out: both work: qaru.site/questions/302871 / ...
And use a +
CSS selector to select the last float element.
http://jsfiddle.net/xt3uhuxn/9/ (Updated in different cases)
.float {
float: left;
}
.float + .float::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
But as you can see, the content of :: after-content is inserted in the Div, not after the div. What can I do to archive my target (stop floating if no nautical elements appear)
Edit: I found an approach: http://jsfiddle.net/xt3uhuxn/11/ The question is this is not-go or can I do it like this for the hole site and just set for each element that will float: clear: none;
?
source to share
The pseudo-element ::after
inserts the field inside the element you selected , not after the element, that is, the child, not the sibling. A child can never clear its floating parent; only the next relative of the float itself or either of the floating point parents depending on your layout can enter the permission .
If you want to apply permission to the next non-fusible element after any number of consecutive floats, use :not(.float)
:
.float {
float: left;
}
.float + :not(.float) {
clear: both;
}
If floats are the last or only children of their parent, you will need to give permission to that item after the parent. This means that you will need to choose a parent as soon as possible. For example:
.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>
source to share
Assuming these DIVs are inside the wrapper and the element you want to clear is the last one, you can also do something like this 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;
}
source to share
Here's a solution for clearing any div, not .float
See 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;
}
If you want to restrict the clearing of the div to a specific parent, make the selector more specific. Something like:
#containingDiv div:not(.float) {
clear: both;
}
source to share