Jump to content
  • 0

Overflow и Float


Imperil
 Share

Question

Привет!

Слышал уже несколько раз из разных источников, что если дочернему элементу ставится float, то у родительского почти всегда должен стоять overflow:hidden;

Я не очень понимаю, для чего?

Читал на эту тему статьи (кстати их не так много именно по связке overflow+float), и все равно не совсем понятно.

Если кто-то из вас сможет или постарается объяснить простым человеческим языком, для чего и почему, то буду очень признателен! Супер, если с примером!

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Это самый популярный (хотя не единственный) способ заставить родительский блок создавать отдельный блочный контекст форматирования. Что убивает двух зайцев — не дает float-ам вываливаться из этого контейнера наружу (по умолчанию они проходят сквозь границы блоков) и не дает им «цепляться» за float-ы, лежащие снаружи, при использовании clear (как происходит здесь, если кликнуть по зеленому сайдбару). Оборотная сторона — проблемы, если надо всё-таки вынести элемент из такого блока наружу.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Curt54rus
      Есть страничка по адресу http://sale.srfhm.ru/css_bug/
      В ней есть табличка сделанная на UL LI тегах, и вот в ячейке Описание, где выводится описание для типа питания не влезает весь текст и остальную часть не видно, скрывается стилем - overflow: hidden
       
      Пробовал убрать этот overflow, тогда вообще таблица вся разъезжается... 
       
      В верстке не особо силен, подскажите пожалуйста где поправить что, чтобы текст нормально влез и весь отображался... Пробовал уже по всякому, всю голову сломал!
       
      Заранее огромное Спасибо!
    • By yaparoff
      Нужно чтобы текст обрезался по вертикали http://skrinshoter.ru/s/040718/dYPUy6EU
      и переполненное содержимое скрывалось
      overflow: hidden почему то не помогает
      https://codepen.io/anon/pen/yErxLY
    • By ows.nightwolf
      Всем доброго времени суток
      У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент становится полностью видим, вылазя за пределы контейнера.
      Вопрос: почему браузеру есть разница установлен ли overflow-x в visible если контент внутри карусели выходит за пределы карусели по оси Y, а не X, и как решить эту проблему?
    • By Launder
      Столкнулся со следующим странным поведением.
      В хроме пока работает transition, фон просвечивает через border-radius (наведите на первый пункт).
      В Лисе градиент имеют такую особенность: полосочка 10px, полосочка 10px, прозрачность, на стыке второй полосочки и прозрачности образуется некий серый фон толщиной пикселя в два. Поскольку фон в примере двухнаправленный, то Вы, убрав одно направление (65 или 66 строчка, не забудте в конце оставленной строчки поставить точку с запятой ), можете увидеть что полоска есть только в том направлении, где нулевой переход из цвета в прозрачность.
      По обеим глюкам: что это? откуда это? куда писать? какие способы бороться?
      Спасибо за внимание
    • By uniken1
      https://jsfiddle.net/6on27wxf/
      Вот такой простой пример. При использовании стиля overflow: hidden; у родительского div увеличивается высота и снизу появляется серая полоса. Если overflow убрать то все нормально. Как сделать overflow: hidden и сохранить высоту?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy