Как запретить обтекание css

Иногда ко мне обращаются с задачами по вёрстке. Вопросы задают как начинающие веб мастера так и владельцы сайтов у которых что то поломалось и веб страница перестала отображаться корректно. Часто это бывает при удалении какого либо элемента из документа, который отменял обтекание других блоков. По этому я решил написать заметку как сделать запрет обтекания css.

Первый способ убрать обтекание css это добавить родителю плавающего элемента свойство overflow: hidden.

                    .wrapper {
                      overflow: hidden;
                      zoom: 1; /*для ИЕ*/   
                    }
                    

Метод не всегда применим. Например если в блоке родителе есть элементы позиционируемые абсолютно, и они должны выходить за рамки родительского элемента ( выпадающее меню). Всё что выходит за блок-родитель будет обрезаться.

Второй способ. Помещаем после блока-родителя блок с свойством clear:both. Пример:

 <div class="wrapper">
   <div class="header"></div>
   <div class="wraprightcol">
        <div class="wrapleftcol">
           <div class="leftcol"></div>
           <div class="rightcol"></div>
        </div>;
   </div>;
   <div class="clear"></div>
</div>;

.clear {
    clear:both;
    font-size:0;
    overflow:hidden; /* для IE */
}

Недостатком метода считается ухудшение семантики кода, так как пустой тэг див захламляет код.

Третий способ как можно убрать обтекание css это использование псевдо элемента :after. К сожалению IE не поддерживает :after до версии 7.0 включительно.

.wraprightcol:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Для ИЕ через условный комментарий подключаем

.wraprightcol {
  overflow: hidden;
  zoom: 1; /* for IE */
}

Ну и последниq способ, как можно установить запрет обтекания css это задать блоку ширину 100%, тогда другие плавающие элементы будут находиться под ним.