0

Is it good idea to add clearfix to all div elements to prevent container collapse situations?

Or to use it just on classes like this ?

<div class="container">
   More div elements...
</div>

.container::after {
 clear: both;
 content: “”;
 display: table;
}
Nemus
  • 3,879
  • 12
  • 38
  • 57
  • There is no point in using it where it is not needed. You're just giving the server more to run. – Joe Jul 27 '17 at 13:59
  • Possible duplicate of [What methods of ‘clearfix’ can I use?](https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use) – Vanity Slug - codidact.com Jul 27 '17 at 14:03
  • 2
    I would stop using floats too - you can use flex now and it is a lot easier to manipulate positions with flex – Pete Jul 27 '17 at 14:03

3 Answers3

3

You use a clearfix only when the child elements are using floats, to avoid collapse situation. Otherwise no need to use clearfix

.clearfix::after{
content:"";
display:table;
width:100%;
clear:both;
}
Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22
  • `width:100%` part is not needed, IMHO. `clear:both` is enough to push this pseudo element below both left and right floats. – Ilya Streltsyn Jul 27 '17 at 15:12
1

As @Chandra Shekar worte, you should only use it when using floats. But note one detail if you use it:

In the CSS rule you posted, you wrote: content: “”; Those are typographical quotes which won't work as desired. Change that to regular quotes, like content: "";, or also single (non-typographical) quotes like content: '';

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

In my opinion, it's a terrible idea, for the following reasons:

  1. Clearfix is a hack. It was introduced as a workaround for another hack — using floats as a main block layout tool, which they were never meant to be (as well as tables!). When float are used for what they were meant to (incut illustrations, tables etc. in long texts) the fact they cross the boundaries of blocks (in both directions, from outside to inside and vice versa) is a feature, not bug. Clearing everything inselectively would lead to ugly holes in the document, text would not nicely flow around floats anymore.
  2. Clearfixes add pseudo elements to the blocks. These pseudo elements have zero size and are invisible if the hack is used for what it was invented (to make the block contain nested floats and, optionally, margins of its children). But it is not definitely the case in other situations. For example, if you turn such block into Flexbox container and set it justify-content:space-between, you would get unwanted space at the end of the container. It's because this pseudo element would turn into flex element and it would follow Flexbox placement rules, affecting the position of other elements. Same for Grid layout.
  3. Clearfix hacks based on the clear property are not ideal even for for containing floats! The 'clearfixed' blocks stay in the same block formatting context (BFC) as their neighbourhood, so they may be affected by other floats in the document (e.g. a floated previous column). The other approach for containing floats, based on creating the new BFC (mostly used in form of overflow:hidden, but there are other alternatives, each with its own strengths and downsides) is in general much more reliable. Please check out this Codepen demo that compares the effect of different solutions to containing floats problem: https://codepen.io/SelenIT/details/qrORXm/.

Personally, I'd recommend not using floats for layout at all, so no 'clearfixing' would be needed for anything. Flexbox has much more layout possibilities than floats ever had, and browser support for it became extremely good now. Use clearfixes as a last resort, if no other way to solve the specific layout problem can help you.

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57