Clearfix. Где ошибка?

386

21 декабря 2016, 02:34

Не могу разобрать с clearfix. По задумке блок div3 не должен залезать на плавающие элементы. Если ставлю отдельный блок со свойством clear: both все работает. Если делаю через псевдоэлемент (код ниже), то подпорка не срабатывает. Можете указать где ошибка?

    <!-- 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>

Ссылка на кодепен: http://codepen.io/Gaxak/pen/mOvvwZ

Answer 1

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

вот как выглядит очистка

Answer 2

Попробуйте как вариант для следующего шага

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