1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why this clear:both method is bad

Discussion in 'CSS' started by ketting00, Jun 26, 2015.

  1. #1
    Hi guys,

    I heard people say that this method is bad and adds unnecessary HTML mark up:
    <!--HTML-->
    <div class='clearfix'></div>
    /*CSS*/
    .clearfix
    {
    clear:both;
    }
    Code (markup):
    I've been using this for years and I'd like to know how bad is it?
    What is the better way to do this?

    Sorry, if you think the question is stupid and you may ignored it.

    I'd just like the clarification and may change my practice if there's a better way to do so.

    Thank in advance,
     
    Solved! View solution.
    ketting00, Jun 26, 2015 IP
  2. #2
    There's a confusion here that needs to be cleared up.
    There is a BIG difference between the outdated clearfix method and applying clear:both to an element to clear floats preceding it.

    Here is an example how the clear property works.
    [​IMG]
    [​IMG]

    There is absolutely nothing wrong with doing that.

    Now about the clearfix method. Basically, it consists of adding an empty DIV with a presentational class, typically .clearfix or .clear, you name it. Why is it bad? Because it completely defeats the point of separation presentation from content, a concept we used not to give a damn a decade and a half ago.

    With that said, you'd probably want to know about an alternative at this point. Thankfully there are quite a few, namely using the overflow property to encapsulate/enclose/wrap floats.
    A member of this community, known as @kk5st, wrote an awesome article about this.
    Here's a link to it : http://gtwebdev.com/workshop/floats/enclosing-floats.php

    Hope this clears it up a bit.
     
    Phil S, Jun 26, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Thanks Phil,

    That helps cleared up a lot.

    The author is a badass one.
     
    ketting00, Jun 26, 2015 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    The clearfix hack was developed by Tony Aslett and described by John Gallant back in the css dark ages. At the time, we didn't understand the new block formatting context concept, and MSFT was pretty much hiding their proprietary hasLayout (which was IE's broken version of the block formatting context, lifted from their application code and unsuitable for the web).

    I see the stripped down version almost universally in themes offered up by know-nothing about the web soi-disant designers. For the most part, Tony's sweet hack has been made obsolete by our better understanding of css in general, and of floats in particular. And let us not forget MSFT's finally bringing IE into this century.

    The "modern" version of clearfix will, like nearly all css properties, comes with gotchas. I'll quote Big John:
    No single method of clearing or containing floats will will work as desired for every case. It is critical to know and understand all the methods.

    cheers,

    gary
     
    Last edited: Jun 26, 2015
    kk5st, Jun 26, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    As others have implied but not quite come out and said, what you have there is a clearing DIV, NOT the actual "clearfix".

    EITHER method though is "bad" in that it's adding an extra DIV to force clearing, or even just a class for that sole purpose is presentational markup -- and presentation doesn't belong in the markup. You should already have a perfectly good wrapper with a class or ID on it, said class or ID clearly saying what the element is, so put float wrapping behavior on that instead.

    If for no other reason than that CSS can be cached across pages or revisits, while markup is not. Again, part of the whole reason we're supposed to be practicing separation of presentation from content is to leverage caching -- in addition to the fact that it's supposed to be (and always was supposed to be from the day TBL created HTML) one markup that adapts the content to many different appearances. Concepts lost on the mouth-breathers who think idiotic nonsense like OOCSS or frameworks serve a legitimate purpose other than crapping all over the markup and making you work harder instead of smarter.

    You should be leveraging existing classes and existing markup BEFORE throwing extra classes or elements in there. This is more true as search engines like Google start penalizing sites for speed -- since more DOM elements == slower rendering. More DOM elements == slower "getElementsBy" in JS. More classes == slower application of style... Of course this is why people crapping out dozens of DIV for nothing, endless pointless classes for nothing, little if anything resembling semantics and diving for extra elements every time they want to do the simplest of things is also "bad".

    Laughably, also why HTML 5's allegedly semantic but ultimately redundant (to numbered headings and horizontal rules) "structural" tags (HEADER, FOOTER, ARTICLE, NAV, ASIDE) are just encouraging people to write bloated code.

    The type of DIV you have there that just does a clear:both is a "clearing DIV" -- you add it inside a container to make it so that container obeys the height of floats inside it. Thing is, overflow:hidden or overflow:auto can also do this. Making that parent element float can also do this... legacy IE doesn't obey that but a haslayout trigger can put in the same behavior, so slapping a div in the markup like that is just bloat and/or developer ignorance.

    The actual "clearfix" is a class you add to the container instead of creating an extra DIV that usually has something like this for properties:

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }
     
    .clearfix {
      zoom:1;
    }
    Code (markup):
    Which is bloated CSS AND adding a class to the markup for no legitimate reason.

    I have NEVER needed "clearfix", and haven't used a clearing div since 2003 (about when things started being properly documented/researched) -- it's just a waste when you could have an existing wrapper simply have:

    #top, .contentWrapper, #footer {
      overflow:hidden; /* wrap floats and margins */
      zoom:1; /* trip haslayout, wrap floats and margins legacy IE */
    }
    Code (markup):
    It's not always the solution, sometimes you need to do "float:left; width:100%;" instead if you need stuff to overflow (though that too has it's own issues like box model padding/border), but it beats the tar out of adding code to the markup.

    We're simply talking another example of outdated, outmoded or just plain silly methodologies people use for no good reason apart from web rot and ignorance.
     
    deathshadow, Jun 26, 2015 IP
    ketting00 likes this.
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #6
    Thanks gary and DeathShadow for additional and useful information.
    I'll apply this new knowledge to my new projects altogether with gradually revising my existing ones.

    @deathshadow I can see now why you keep saying HTML5 is redundant.

    Considering what you says above, mine, even sites I perceived as compact are still bloated.

    Great job!

    Cheers,
     
    ketting00, Jun 27, 2015 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    You're right, I could have been more clear. I did, however link to the original sources, including the accumulated wisdom about hasLayout. If not critically need to know material now, they do provide an historical context.

    cheers,

    gary
     
    kk5st, Jun 27, 2015 IP
  8. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #8
    you don't need to make an a class. because it's just one line only.
     
    huseinbandi, Jul 31, 2015 IP
  9. pixelizoid

    pixelizoid Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    So how do we apply that rule? inline? it's worse.
     
    pixelizoid, Aug 1, 2015 IP
  10. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #10
    you only need to put "clear:both" on specific location only. because the "old" css will load all line in that page, except you use function like the new features on scss or you will to convert css code.
     
    huseinbandi, Aug 2, 2015 IP
  11. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #11
    I think this is very bad practice for performance. If you put style into a div. Your computer will make request every time to render the page. Every request has overhead of more than 8000 bytes of http header, according to wikipedia. This slow down your site rendering. You should leverage caching.

    I work with data at bit level. I know well how this is going to cost performance.

    And this not going to be mobile-friendly, I don't know about this but guess it would.
     
    ketting00, Aug 2, 2015 IP
  12. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #12
    yes of course, the new way to clear this thing is use css function. using @mixin method
     
    huseinbandi, Aug 3, 2015 IP
  13. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #13
    A similar question, what does this exactly do?

    .clearfix:before,
    .clearfix:after {
    content: " ";
    display: table;
    }
    Code (markup):
     
    qwikad.com, Aug 4, 2015 IP
  14. henrix343

    henrix343 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #14
    It's nothing wrong in using clear:both; command

    I often using
    {clear:both;
    overflow:hidden;
    width:100%;}
     
    henrix343, Oct 11, 2015 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    @henrix343 -- You COMPLETELY missed the question. You are correct, there's nothing wrong with using clear:both -- that's NOT what was being asked.

    What was being asked is why having a class like clearfix JUST to do it is bad... and it's bad because it's presentational use of classes. It's like that OOCSS asshattery with the "let's make a class for everything" bullshit.

    For example:

    .clear { clear:both; }
    .wrap { overflow:hidden; zoom:1; }
    .red { color:#F44; }
    .center { margin:0 auto; }

    IDIOTIC HALFWIT BULLSHIT that defeats the point of even using CSS in the first place!!! At that point one might as well go back to writing HTML 3.2!

    There's the classic saying about semantic markup: "If you are choosing your tags based on their default appearance instead of their meaning, you are choosing all the wrong tags for all the wrong reasons."

    I extend that into ID's and classes, say what things are NOT what they look like because they might not look like that on all possible media targets. I'm so sure that "red" or "center" are meaningful on aural and braille, or that the clearing is needed when columns and floats are stripped using media queries for narrow displays. Say what it is, or WHY it's getting style, NOT what that style IS.

    Hence why the way people are misusing the mouth-breathing dumbass "aside" tag is some real horned bovine excrement.

    Admittedly, MOST people are still vomiting up HTML 3.2 and the proprietary crap that followed, and then slapping 4 tranny or 5 lip-service on it so they can pat each-other on the back over how "modern" they are. That HTML 5 further pisses on the structural rules sending development practice back to 1990's style thinking certainly isn't helping matters on that front either.
     
    deathshadow, Oct 11, 2015 IP
    ketting00 likes this.
  16. henrix343

    henrix343 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #16
    henrix343, Oct 15, 2015 IP