Почему overflow: hidden; не скрывает текст рядом с блоком float?
Существуют понятия поток элементов в документе и контекст форматирования. Строчные располагаются в потоке слева направо, блочные — сверху вниз. Float заставляет другие элементы в потоке обтекать указанный. Именно это вы наблюдаете в первом примере.
Определенные свойства создают новый контекст (overflow, display с некоторыми значениями и другие). В новом контексте создается свой поток элементов. Вы это видите на втором примере.
Сработает если задать нижний отступ:.float-left {
  margin-bottom: 70px /* = 100px - 30px (высота родительского блока - высота блока .float-left) */
}