Большинство методов clearfix включают в себя добавление элементов в самом низу родительского контейнера, и я больше всего предпочитаю подход с псевдоэлементом, поскольку он недобавить ненужные элементы в HTML.

Однако недавно я обнаружил, что имею дело с контейнером, в котором плавают некоторые дочерние элементы, но не все. Скажем, первые 2 ребенка: первый плавает влево, а второй - вправо. Мне нужен способ очистить float сразу после второго элемента, поэтому содержимое ниже немежду ними не втиснутся. Есть ли способ очистить плавающие элементы в середине, но без добавления элемента clearfix?

Ниже приведен пример:

HTML

    
        first child!
    
    
        second child!
    
    
        third child!
          

CSS

.container {
    width: 200px;
}

.child:nth-child(1) {
    float: left;
    background: yellow;
}

.child:nth-child(2) {
    float: right;
    background: red;
}

.child:nth-child(3) {
    background: blue;
    color: white;
}

Пожалуйста, посмотрите этоjsfiddle чтобы увидеть, что у меня есть сейчас.