1. 8

  2. 5

    I prefer using a pseudo-element created by CSS to clear a float (like .wrapper:after { content: ''; display: block; clear: both } instead of adding an element to my HTML to clear it, or add an additional element surrounding my floated elements.

    The reason I’d rather keep my float clearing 100% inside CSS (and not in HTML) is that it’s often the case that the float isn’t always there. If the float is only added sometimes by CSS (like inside a @media query) working around that element in HTML all of the time when no float is happening is annoying. When the clearfix comes from CSS you can add it only in the situations where you need it - allowing you to be a lot more flexible.

    1. 2

      I never understood why people used the clearfix hack. Using .container { overflow: hidden; } for a container with no set height will do the same thing as clearfix.

      Live example: https://codepen.io/anon/pen/qRXGaX

      1. 4

        It’s a little bit of tradition, but also there are slight differences in style of writing and how these hacks may have side-effects: http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use