I&#x27;d be worried about both!  If you have to clear a float, you can do it even more cleanly in CSS by using a psuedo element.<p>The old trick was to set `overflow: hidden` on the element containing floated items so it would always expand to contain it - but then things like box-shadows get cut off by the containing element. To get around this, you can use an `:after` pseudo-element on the element that contains the float items. This comes after the last floated item and automatically clear the float without needing `overflow: hidden`.<p>Imagine markup like this:<p><pre><code>    &lt;main&gt;
      &lt;section&gt;&lt;&#x2F;section&gt;
      &lt;section&gt;&lt;&#x2F;section&gt;
    &lt;&#x2F;main&gt;
    
    .section {
      float: left;
    }
    
    main:after {
      content: &#x27;&#x27;;
      display: block;
      clear: both;
    }
</code></pre>
The advantage of clearing a float this way over sticking `&lt;div style=clear:both&gt;&lt;&#x2F;div&gt;` or a `.clearfix` class in your HTML is that when doing responsive design, my method keeps the clear in your CSS (and possibly only one @media query). With a `&lt;div&gt;` or class in your HTML you have to deal with that element at all widths - now do you have to specifically override your `.clearfix` class inside a @media query when doing responsive styles? How intuitive is that?