Переполнение: скрытый контейнер не содержит плавающего соседнего элемента

Мой контейнер overflow: hidden не содержит внутри себя соседний плавающий элемент (оранжевый прямоугольник).

Плавающий элемент идет рядом с контейнером (разделом). Но когда я удалю overflow:hidden, соседний плавающий элемент войдет внутрь контейнера и будет уважать плавающие дочерние элементы контейнера.

Почему это происходит? Имеет ли это какое-либо отношение к контексту форматирования блока?

Может быть, когда я применяю overflow: hidden; для контейнера, он запускает новый BFC и будет содержать только его дочерние элементы, а не соседние плавающие элементы?

Вот скрипта


person Limpuls    schedule 16.08.2016    source источник
comment
Вопросы, требующие помощи в отладке, должны содержать кратчайший код, необходимый для его воспроизведения, в самом вопросе. NB. Не злоупотребляйте блоками кода, чтобы обойти это требование.   -  person Paulie_D    schedule 16.08.2016
comment
@Paulie_D Извините, я новый пользователь SO, и я ничего не пытался обойти. Исправим.   -  person Limpuls    schedule 16.08.2016
comment
Добро пожаловать в Stack Overflow! Я отредактировал ваш вопрос, разбив его на абзацы, чтобы его было легче читать. С помощью обратных кавычек вы можете форматировать код (например, CSS). Гиперссылки могут быть встроены с помощью кнопки гиперссылки. Пожалуйста, добавьте соответствующий HTML-код внутри вопроса (не только в скрипке). Удачи!   -  person trincot    schedule 18.08.2016


Ответы (1)


Я думаю, вы уже знаете ответ, что это BFC. :)

Если вы поместите переполнение (кроме видимого), то он создаст новый контекст форматирования блока и не сделает приглашение контейнера в соседний плавающий элемент.

Вот почему, если вы сохраните overflow: hidden, оранжевый div будет рядом с контейнером.

Проверь это:

Переполнение CSS: скрыто с поплавками

информация о BFC

person kukkuz    schedule 16.08.2016
comment
Хорошо, спасибо за некоторую информацию. Но знаете, почему тогда оранжевая коробка так красиво сидит рядом с контейнером? Например, почему он не перекрывает другие элементы или что-то еще, но идет рядом с разделом. - person Limpuls; 16.08.2016
comment
поскольку вы не установили ширину для section, он автоматически настраивается... попробуйте установить ширину, и теперь он не будет сидеть рядом очень хорошо. - person kukkuz; 17.08.2016
comment
@Limpuls просто любопытно, так что следите за этим. Не могли бы вы опубликовать свои выводы, если бы вы смогли использовать это в какой-либо практической ситуации? Также хотел бы получить ваш ответ / принять ответ, если ответ помог вам. Спасибо! - person kukkuz; 21.08.2016