Is there a need for a clearfix class in HTML5?
I have a couple of clearfix classes that I picked up from the Internet long ago, and I’m not sure what to think of them.
I guess you need them to clear floats?
Could someone help me understand this in the modern HTML world?
A more appropriate question is whether the clearfix is needed in CSS. That depends on the situation.
The clearfix is used to contain floated elements. I usually do overflow:hidden, display:table, or clearfix to do this. Ultimately, floats are one of the more uncommon techniques I do on my pages. So the ultimate need for containing floats is pretty small. But yes, there is still a need to use the clearfix SOME. If overflow:hidden; or display:table isn’t doing hte job (or breaking something) then perhaps use the clearfix instead.
Technically “contain” since you are putting it on the parent element to CONTAIN floated children. Just a small distinction.
[quote=“mikey_w, post:1, topic:196227, full:true”]
Is there a need for a clearfix class in HTML5?
…
I guess you need them to clear floats?
Could someone help me understand this in the modern HTML world?
[/quote]Just to be clear, floats and clearfix (or similar techniques) are CSS techniques. Which version of (X)HTML you are using them with is pretty much irrelevant.
In fact, there is no need to keep referencing the HTML version. We have told you multiple times that HTML5 is just an additive to HTML4. There is no need to call them by the versions. Just call it “HTML”.
Try telling companies or job recruiters that!!
Care to provide some simple examples? (I have no clue how you would use display:table)
I always struggled with this topic, and honestly don’t even remember what it is about.
I just asked because as I build me business website, I am trying to replace old code with better approaches. I was wondering if I needed to apply clearfix to the <body> tag or something?
HR and job recruiters are not technical people. They go off buzzwords. As a supposed web developer, you should know your craft better than non-techies. I don’t NEED to tell that to HR or job recruiters. They don’t know any better.
There are many examples on Google, both showing display:table and clearfix in use.
Reading more on the clearfix / examples will lead you to know where to use clearfix, and on what elements / situations. There are many great articles which describe this.
As Ryan said:
sometimes it’s best just to understand the reasoning BEHIND some technique rather than just know it by rote.
clearfix, or clarify:pseudo means just adding clear:both to a block element after the floats.
if you KNOW you have at least one other element in the container after your floats, you can add clear:both directly to the css targeting that element and you are set. .clearfix{…} can be a way to treat this technique as an opt in, which can be handy.
but, as ryan said, if you don’t have the extra element after the float, or just simply don’t want to chance it, giving overflow:hidden, display: table or even display:inline-block; TO THE CONTAINER, will serve just fine. Again you could assign an opt-in class (.clearfix) to keep yourself organized… or just incorporate it into your other css rules. both will have the same effect.
hope that helps
PS:
some coders organize with .clearfix{} as a way to communicate with other team members, ‘this is here to keep floated children contained’.
Clearfix is something you will only need in certain circumstances. When a float had more height than the container it is in. For example, you have a container window with a floated sidebar that is 1000px high, the the content in the main window only makes it 600px in height (the float does not affect its size), the sidebar protrudes out of the bottom of its container and looks wrong. Thats when you need clearfix.
The problem is illustrated here.
Most of the time (in my experience) the problem does not exist.
Yes but that’s a bit dangerous; what if that structure applies to all pages (likely) and some pages have less content than others? What if you add callouts to the sidebar for ads or something else? Playing with fire; if that situation arises, it should always have some sort of clearing/containing mechanism in place.
I’m not sure I follow what you mean. Are you saying you should always have some form of clearfix where floats are involved?
To specifically answer your questions:
“Clearfixing” techniques are not related to HTML5; For that matter, they are not related to HTML at all. Clearfixing techniques are related only to CSS.
Some people/tutorials call clearingfixing techniques, “hacks”. Like this article: http://learnlayout.com/clearfix.html.
Truth is, they are not hacks. Pretty much, a CSS hack does not validate or is against a standard or uses proprietary technology. The clearfixes I’ve used in my career are all valid CSS techniques. That’s what they are, techniques.
Yes, that’s what you use clearfixing techniques for.
Again, clearfix techniques are related to CSS only.
The reason you/we use a clearfix technique is because when an element is floated it’s taken out of the document flow… it’s “floating”. What happens is that the parent container won’t be taking that element into account to allow it to define its height. We know that the content (text, images, videos, forms, etc.) inside a container is what dictates the height of that container, unless this height is specifically defined.
This means that because the floated element isn’t affecting the height of its parent container, its parent container will “shrink” its height, thus we see the floated element sticking out of the container.
Then when we apply a clearfix technique to that parent container, we’re pretty much telling the parent container: “Dude, I need you to consider the floated element(s) inside of you so you can then extend to the necessary height. You cool with that? :)”. And then the parent container, magically really, extends the height IF that floated element(s) wasn’t(weren’t) floated in the first place.
And then to save you all that headache, you use Flexbox 
: http://flexboxin5.com/
It may validate, but I think it’s still a bit hacky. When creating GUIs, it’s common to be able to use either a grid layout or a flow layout. CSS was supposed to also give us both options. As far back as 1998, CSS was supposed to be able to emulate the grid layout of tables with display: table. But Internet Explorer took a veeeeeeeery long time to implement that feature, so we had to use flow layout (float) even for designs that very clearly would have worked better with a grid layout.
In short, clearfix is hacky because it’s only needed when using flow layout tools to implement grid layout designs.
For stability, yes.
If the float needs to be inside a certain container then yes you should always make sure that the float is contained and not just rely on subsequent content to be taller than the float to achieve that effect because content may change.
Of course there may be some cases where you don’t want your floats to be contained and have them flow in and out of containers but these are few and far between.
I will admit, I have never used it on an actual site, although I do have one, just as described with a floated sidebar. The main content and the sidebar content do vary in length from page to page. But I have balanced the content between them, the main content is always longer.
I have heard it referred to as a “hack”. It seems a derogatory term that puts people off using it unless absolutely necessary. But there seems to be some debate over whether it is a hack.
That suggests that it is a hack because the method which requires it is a layout hack. I don’t believe it is. I don’t dispute the value of layout tools such as display: table and flexbox, they are great, but I think float still has its place. When I float a picture or sidebar, I’m not trying to emulate a grid layout, I want the main content that follows to wrap to the side and beneath the float, not leave empty wasted space beneath right to the foot of the container as a grid/column layout would.
If your sidebar is hitting the bottom, then maybe a grid layout is the better option. But in a case where content varies in length from page to page, that may not be what you want.
For now. What about the future? I gave some examples.
Seems like unnecessarily playingwith fire.
So you should only use clearfix when you need it?
I guess I was wondering if you could apply it to <body> and then maybe it would always make sure the parent container included floated children. My thinking is probably too simple.
That demo doesn’t work…