Может ли переполнение: скрытое повлиять на макет?

#html #css #layout #overflow

#HTML #css #макет #переполнение

Вопрос:

У меня нет способа объяснить это, кроме как сослаться на следующий пример на JS Fiddle — в нем последнее СИНЕЕ поле не расширяется до 100% ширины, как ожидалось, после того, как я введу атрибут overflow: hidden.

У меня создалось впечатление, что overflow: hidden повлияет только на аспекты видимости и не повлияет на макет. Кто-нибудь может объяснить, что происходит в этом примере?

Редактировать:Эта проблема, похоже, ограничена браузерами webkit (например, Chrome)

1. В каком браузере вы видите эти проблемы? Для меня это выглядит нормально в FF

2. я вижу, на что он указывает в chrome. так что, вероятно, webkit

3. Примечание: у вас не должно быть нескольких элементов с одинаковым идентификатором, например, blue и red. Однако это не вызывает эту проблему, которую я вижу в Chrome / Lin.

4. я думаю, что есть некоторые проблемы с вашими стилями. во-первых, вы не можете использовать 2 идентификатора дважды (используйте классы). во-вторых, я не думаю, что вы очищаете свои значения с плавающей точкой здесь

5. Похоже, что это не относится к Chrome (/ Win), по крайней мере, с версии 20.

Ответ №1:

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

Вы можете прочитать об эффектах в этой замечательной статье: Магия переполнения: скрытое

ОБНОВЛЕНИЕ: я переписал ваш jsFiddle во что-то, что работает (протестировано в Chrome). Вместо определения margin-left на #red и #blue (которые действовали бы по-другому из-за overflow: hidden ), я поставил margin-right на #yellow .