div:after clearing method not working

Question

I don't know why I can't make a clearing floats method work in my page. If I use the classical <div class="clearfix"></div> there isn't any problem, but trying to use a more semantical solution doesn't seem to be working. Here's the code I have:

.clear:before, .clear:after {
content: " ";
display: table;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

And for example, in this URL, I can't make it work for clearing after form.woocommerce-ordering: http://melopienso.com/testingtwo/shop/

The two floated elements have this code:

<p class="woocommerce-result-count">
Showing all 5 results</p>

<form class="woocommerce-ordering" method="get">
<select name="orderby" class="orderby" data-cip-id="cIPJQ342845639">
    <option value="menu_order" selected="selected">Default sorting</option><option value="popularity">Sort by popularity</option><option value="rating">Sort by average rating</option><option value="date">Sort by newness</option><option value="price">Sort by price: low to high</option><option value="price-desc">Sort by price: high to low</option> </select>
</form>

And their SCSS:

p.woocommerce-result-count { float: left !important; margin: 0 !important; }

form.woocommerce-ordering {
float: right !important;

    &:before {
    content: " ";
    display: table;
    }

    &:after {
    content: " ";
    display: table;
    clear: both;
    }
}

So the margin-top of div.yit-wcan-container isn't taking effect. Any ideas?

Thanks a lot!

Answer 1

::before and ::after don't create pseudo elements before and after a targeted element, they actually create elements before and after any content within an element. Therefore all your CSS is doing right now is creating some pseudo elements within the already floated form element, so it correctly has no effect on the "outer" context.

You must wrap a div or some other block element around the 2 floated elements and then apply clearfix styles to it. There is no other way around this unless you want to specify a fixed margin or something like that which I don't think anyone would recommend.