Исправить?) Блоки игнорируют float-элементы, и это написано в спецификации. А текст учитывает, да.
Так что ваш вопрос звучит так: «Как извратиться и сделать так, чтобы ...?».
Вы неправильно пример сделали — не в те поля код вставили, jQuery не подключили. Не пользовались jsfiddle Никогда?
Вот исправленный. Работает, как и ожидалось jsfiddle.net/petroveg/8jtLotxg/6
Использование jQuery-объектов и их метода для хранения. Чтобы было понятно, задайте себе вопрос — почему вторым аргументом в data() можно передавать ссылку на объект?
В jQuery data-атрибут — стартовое значение, не более того.
Что вовсе не отменяет вашей правоты относительно использования именно таких атрибутов. И хранить в атрибутах можно только строки.
M-ka: jQuery всегда в процессе траверса создаёт массив элементов, независимо от того, каким селектором вы пользуетесь. Для id будет массив из одного элемента, будет ли на странице их несколько, или один.
Именно про эту особенность jQuery я вам написал, но вы предпочли не понять.
Дмитрий Филимонов: Что-то я всех запутал, да и сам запутался:) Нужно ввести современные термины flow root, оставив старинные containing block и stacking context, освежив их некоторыми современными правилами.
Я не совсем понял, что вы хотели сказать насчёт убирания overflow, но в части контекста форматирования правы — именно flow root отвечает за учёт потомков. Только не забывать, что flow root идёт рука об руку с containing block.
Ну а насчёт stacking context — он имеет значение в рассматриваемой ситуации, но может выражаться в возможном нарушении, например, как здесь jsfiddle.net/petroveg/yk66o84d/3
Вроде и flow root есть, и с containing block всё в порядке, но вот stacking context подводит за счёт анимации.
Так что приношу извинения за смешивание в кучу терминов, что не отменяет сложности темы.
Так что ваш вопрос звучит так: «Как извратиться и сделать так, чтобы ...?».