Почему "переполнение: авто" очищает всплывающие окна? И почему нужны чистые поплавки?

Мой вопрос возник, когда я создал мои (первые!) два столбца.

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

Я нашел решение онлайн, где он добавляет стиль (это правильное слово?) 'overflow: auto' в оболочку. После некоторых исследований я нашел несколько статей, в которых объясняется, что происходит переполнение, включая ответ на этот стек: Почему "переполнение: скрытое" очищает поплавок?

Однако ничто в моих исследованиях не объясняет, каким образом я могу понять, почему высота обертки не автоматически расширяется, чтобы соответствовать вложенным divs, двум столбцам.

Не все ли вещи, вложенные в div, содержатся внутри этого div? Разве это не создает границы для внутренних элементов?

Любая помощь ценится для этого noobie. Спасибо!

Ответ 1

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

Обратите внимание, что overflow: auto не очищает поплавки - это просто заставляет элемент содержать свои поплавки, создавая для них новый контекст форматирования блоков, чтобы они не вторгались в другие элементы в родительском контексте. ¹ Это то, что заставляет родителя растягиваться, чтобы содержать их. Вы можете очистить только float, если вы добавите очищающий элемент после float. Родительский элемент не может очистить свои плавающие дочерние элементы.

Причина, по которой создание нового BFC приводит к тому, что элемент содержит свои поплавки, подробно описан здесь, и причина, по которой overflow: auto может привести к созданию BFC подробнее здесь.

¹_{ОК, возможно, "просто" не было лучшим наречием.}