Clearfix question

[MarkRBM]

I am using the html5bp and their clearfix is as so

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/

**.clearfix:before,
.clearfix:after {
content: ” “; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
clear: both;
}

/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
***/

.clearfix {
*zoom: 1;
}

I have been having problems getting it to work but I figured it out. I have a .mainwrapper div which has margin right and left and it also had height:100%. while it had this height 100% in it the clearfix wouldnt work on any children elements. I am just wondering why that is?

[Paulie_D]

Clearfix should be applied to the **parent** elements which contains floated elements not the children (unless they also contain floated items).

[MarkRBM]

yeah sorry, within this .mainwrapper div there was a .body div and that had the clearfix class. while .mainwrapper had height:100% the clearfix would not work on .bodys child elements

[Paulie_D]

We’d have to see a link to debug properly.

I have to say (and this is a personal preference)…I don’t like a .body div inside a .main wrapper.

I’d go for a different classname…`body` has a specific connotation and I dislike re-using it.

[MarkRBM]

Would you say the same about using a .header now that there is a head tag? I am not saying this to try and retort in anyway I am legitimately trying to find out what people who do this all the time do as I am in the process of teaching myself these things so I don’t have anyone else to ask.

[Paulie_D]

If there is a header and I need to add a class I would make it more specific to it’s location.

So I might have

&/or

however for the second I’m more likely to do something like

article > header

[Paulie_D]

Don’t get me wrong, there is nothing fundamentally wrong with using ‘body’ as a class name, I just think names that are the same as elements avoid any potential for confustion.

There are exceptions (heading tags [`h1`, `h2` etc.] for instance).

[MarkRBM]

I understand you, I think convention is important and so far finding out those convention dos or donts is a lot harder than finding out how to code up a responsive grid and when I ask questions on other sites I almost always get called on something that isn’t technically wrong but just isn’t done by convention.

[Paulie_D]

Hey…just my opinion…it may not be the **’overall’** convention (if there is such a thing) but it works for me.

Back to you original question, do you have a link or could you create a Codepen?

[MarkRBM]

I am going to leave it for now I was just wondering if there was an obvious answer, there is a lot of code that it might be so unless I run up against the problem again I will forget about it for now. Thanks

[Alex]

I usually concern myself with making something that works instead of following ‘convention’, but that’s just me.

[PicnicTutorials]

Here is all that is necessary if you are no longer supporting ie6/7.

.contain:after {
content:”;
display:block;
clear:both;
}

[MarkRBM]

Thanks all. What I meant as far as convention goes was that if I show someone my code (say in an interview) and the first thing that pops out to them are all the things that ‘just aren’t done’ or however you want to put it I don’t think it does me any good. So while I am learning I might as well start with good habits.

[Alex]

> So while I am learning I might as well start with good habits.

That’s a very good idea, most people don’t think that way, I sure didn’t.

[Author]

Posts