Can't make out with clearfix. As planned, the div3 block should not climb onto the floating elements. If I put a separate block with the clear property: both, everything works. If I do it through a pseudo-element (code below), then the backup does not work. Can you indicate where the error is?

<!-- STYLE --> <style> * { margin: 0; padding: 0; } .wrapper { height: 100px; width: 100%; background-color: silver; } .clearfix:after { content: ""; display: table; clear: both; } .div1 { float: left; background-color: rgba(227,27,191,0.5); width: 30%; } .div2 { float: left; background-color: #A8ECFF; width: 40%; } .div3 { width: 30%; height: 180px; background-color: #50D42A; } </style> <!-- CONTENT --> <div class="wrapper clearfix"> <div class="div1">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </div> <div class="div2">Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some Text of some </div> </div> <div class="div3"></div>

Link to code: http://codepen.io/Gaxak/pen/mOvvwZ

    2 answers 2

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

    here's what the cleaning looks like

    • Thanks for the answer. But it's not entirely clear why using a single selector .clearfix: before {} fix will not work? - MAslaev
    • but you probably know that :before and also :after usually works either with positioned elements or with floating elements, in your case the conditions are not met, that is, neither one nor the other, and also you need to specify the whole 'spectrum' to what will the cleaning be applied to and for you only for :before i.e. after some element is cleared and before and the element itself is not - user33274
    • "... what: before and also: after works as a rule either with positioned elements or with floating ones ..." - frankly I did not know that. A link to the sauce can give? In the specification, I did not find something :( - MAslaev

    Try as an option for the next step.

      .div3 { width: 30%; height: 180px; background-color: #50D42A; margin: 200px; } .wrapper { height: 100%; width: 100%; background-color: silver; }