Unable to clear float with pseudo element

Question

I'm trying to clear the float with the css pseudo element, but it doesn't work. What am I doing wrong? Fiddle

HTML:

<div id="container">
    <div id="inner1"></div>
</div>
<div id="afterfloat"></div>

CSS:

#container{
    float:left;
    background: grey;
    border: 1px solid black;
}

#inner1{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid black;
}

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

#afterfloat{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
}

May I ask what you're trying to do ? A wild guess would be to add `clear:both;` or `clear:left` to `#afterfloat`. — HamZa, Mar 05 '14 at 10:27
+1 I tried the same. I mean clearing float with pseudo elements. didn't work. — Mr_Green, Mar 05 '14 at 10:30
@HamZa I'm trying to repeat solution shown at [All About Floats](http://css-tricks.com/all-about-floats/). — Dimt, Mar 05 '14 at 10:34
You can check this [link](http://stackoverflow.com/a/12871734/3030434) — Amarnath Balasubramanian, Mar 05 '14 at 10:38
HamZa is right - you absolutely do not need a clearfix for this. — BoltClock, Mar 05 '14 at 11:03

score 3 · Accepted Answer · edited Mar 05 '14 at 12:10

3

:after pseudo class in an element does not mean "after the ending tag of that element", it will put after all inner items in an element. So you cannot use it for clear-fixing. Try to use -

#afterfloat {
    clear: both;
}

edited Mar 05 '14 at 12:10

HamZa

14,671
11
54
75

answered Mar 05 '14 at 10:38

Iqbal Kabir

1,518
10
16

So, what would be the solution in regards to [All About Floats](http://css-tricks.com/all-about-floats/) ?. – Dimt Mar 05 '14 at 10:42
1

@Dimt Does seem to be that way, didn't know that. So I guess you just have to [**DEMO**](http://jsfiddle.net/Ruddy/LqKW9/8/)...? Or like Iqbal said [**DEMO**](http://jsfiddle.net/Ruddy/LqKW9/10/) – Ruddy Mar 05 '14 at 10:48
According to [All About Floats](http://css-tricks.com/all-about-floats/) and other sources I should be able to use a pseudo element to clear the float without any extra markup or clearing succeeding element. Is this not valid statement then ? – Dimt Mar 05 '14 at 10:53
@Dimt No. That solution is for another case. If your parent element has float:none; and children has float:left or right, in that case parent element does not grow with the children element. In that case you can use ".clearfix:after" solution, to grow the parent with children element. – Iqbal Kabir Mar 05 '14 at 10:58
Ah, I see, so instead floating parent to make it to expand to the child's size I can use the pseudo element. – Dimt Mar 05 '14 at 11:00
1

`:after` is a pseudo-element, not a pseudo-class. Also not sure what you mean by "after all inner items in an element". A single element can only generate a single `:after` pseudo-element for itself. – BoltClock Mar 05 '14 at 11:02
@Iqbal _"That solution is for another case"_ I think that is the answer to my question, thanks. – Dimt Mar 05 '14 at 11:07
@BoltClock Probably that is my lacking in English. I meant "At the end, but inside of the element." – Iqbal Kabir Mar 05 '14 at 11:16

Unable to clear float with pseudo element

1 Answers1