предупреждение: «символы» устарели: используйте напрямую строку или подстроку

Хотя все ответы устраняют проблему, но у них есть компромиссы / корректировки / компромиссы, такие как

• floats, у вас есть для флота элементов
• border-top. Это подталкивает родителя по крайней мере на 1px вниз, а затем его следует корректировать, вводя маркер -1px в сам родительский элемент. Это может создать проблемы, когда у родителя уже есть margin-top в относительных единицах.
• padding-top, тот же эффект, что и при использовании border-top
• overflow: hidden, не может использоваться, когда родительский должен отображать переполненный контент, например выпадающее меню
• overflow: auto, вводит полосы прокрутки для родительского элемента, который имеет (намеренно) переполняющий контент (например, тени или треугольник подсказки)

Проблема может быть решена с использованием псевдо-элементов CSS3 следующим образом

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/