Очистка потока

Очистка потока

При использовании плавающих блоков(float: left/right) в потоке вывода могут возникнуть проблемы: родительский блок схлопывается и теряет высоту, остальные блоки начинают обтекать плавающие блоки.

В таких случаях производят «очистку потока».

Есть несколько подходов к решению задачи:

  • блочный элемент со свойством clear: both; в конце родительского блока;
  • сделать плавающим блок-родитель;
  • overflow:hidden; для блока-родителя

Хочу предложить еще один вариант: для очистки потока родительскому блоку задать display: table;. Чтобы симулировать поведение подобное блочному элементу, необходимо задать ширину в 100%, в результате имеем:

.cleared {
    display: table;
    padding: 0; /* можно попробовать box-sizing */
    width: 100%;
}

Конечно, этот способ как и остальные имеет свою проблему — приходится обнулять боковые padding’и либо использовать box-sizing(bad for old IE).

Но у него есть свои неоспоримые преимущества:

  • нет необходимости во вспомогательных блоках;
  • родитель не «плавает»
  • контент можно позиционировать за границами блока-родителя.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *