automatic `clear: both` after set of floated items

Question

I have a CMS with custom Elements, some of them shall be floated with each other. My idea is to use CSS3 to automatic insert a clear: both at the end of them without add a extra div with class="clear".

I try to this clear:both work around: https://stackoverflow.com/a/6681806/2481955

And use the + CSS Selector to select the last float-Element.

http://jsfiddle.net/xt3uhuxn/9/ (Updated with 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 ::after-Content is inserted into the Div, not after the div. What could I do to archive my goal (stop floating if no mor float elements are coming)

Edit: I found an approach: http://jsfiddle.net/xt3uhuxn/11/ The question is, is this a no-go or can I do it like this for the hole site and just set for every element that get floated: clear: none; ?

BoltClock · Answer 1 · 2015-01-09T17:48:13.267

0

The ::after pseudo-element inserts a box inside the element you're selecting, not after the element, i.e. a child, not a sibling. A child element can never clear its floating parent; only a following sibling of either the float itself, or any of the float's parents depending on your layout, can introduce clearance.

If you only want to apply clearance to the next non-floating element after any number of consecutive floats, use :not(.float):

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

If the floats are the last or only children of their parent, you will need to give clearance to the element after the parent element. This means you will need to be able to select the parent somehow. 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>

edited Jan 09 '15 at 17:48

answered Jan 09 '15 at 17:25

BoltClock

700,868
160
1,392
1,356

what If the float elements are the last elements in their parent? – nbar Jan 09 '15 at 17:29
oh you did an edit, i tried this one but it was not what I looked for in my case. I try to update the fiddle for more special cases later. – nbar Jan 09 '15 at 17:30
@nbar: Then you can either apply clearance to the next sibling of the parent, or set `overflow: hidden` on the parent if it needs to expand to contain the floats. – BoltClock Jan 09 '15 at 17:30
@nbar: No problem. Be sure to include the case you mentioned when you do edit it. – BoltClock Jan 09 '15 at 17:30
updated the fiddle: http://jsfiddle.net/xt3uhuxn/2/ Your solution works for CASE 2 – nbar Jan 09 '15 at 17:45
I don't know the name/class of the parent. It could be in any block (div) - as there is no CSS Parent Selector it seems that it is not possible with CSS only. – nbar Jan 09 '15 at 17:50
could you take a look at http://jsfiddle.net/xt3uhuxn/11/ is this fine or a no-go? – nbar Jan 09 '15 at 17:59
@nbar: Applying clearance to everything except floating elements seems a bit excessive, because they can clear other floats in the layout that you do not intend to clear. I think it boils down to limiting that selection somehow. For example if the custom elements and everything else will only be in a `.content` div, or something like that. That's all the advice I can give for now. – BoltClock Jan 09 '15 at 18:01

score 0 · Answer 2 · answered Jan 09 '15 at 17:33

0

Assuming those DIVs are inside a wrapper and the element you want to clear is the last one, you could 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;
}

answered Jan 09 '15 at 17:33

Teknotica

1,096
6
19

I don't know the name/class of the wrapper – nbar Jan 09 '15 at 17:44

score 0 · Answer 3 · answered Jan 09 '15 at 17:33

0

Heres a little hack for you, set the after element to full width so it pushes everything else to the next line.

CSS

.float {
float: left;

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

answered Jan 09 '15 at 17:33

Justin Breiland

450
2
5

this does not work. Also not when I only select the last element – nbar Jan 09 '15 at 17:47

score 0 · Answer 4 · answered Jan 09 '15 at 17:53

0

Here's a solution to clear any div that's 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 div clearing to a certain parent element just make the selector more specific. Something like:

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

answered Jan 09 '15 at 17:53

mikelt21

2,728
4
23
33

Hmm that's an interesting approach. The "problem" with this is, that there is not only the .float class that floats element. – nbar Jan 09 '15 at 17:56
i take it you won't know the classes on the other floating elements? – mikelt21 Jan 09 '15 at 17:59
I know the other classes. I have full control over all the CMS. out of your idea I created: http://jsfiddle.net/xt3uhuxn/11/ That seems to work, the question is, is it fine or a no-go? – nbar Jan 09 '15 at 18:01
that's essentially the same thing as my solution in the cases that you presented. but yea that should work =). – mikelt21 Jan 09 '15 at 18:09

automatic `clear: both` after set of floated items

4 Answers4