2016
7
Нояб

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

grigoriev
1193
запрет обтекания 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%, тогда другие плавающие элементы будут находиться под ним.

Поделиться:

Комментарии

petr

petr

10.11.2016 15:03 Ответить

Когда задаю хедеру position fixed он уходит под контент(контейн ер) , а надо чтобы хедер на него налазил , пробовал ваш первый метод не помогло , что посоветуете

petr

petr

10.11.2016 15:05 Ответить

http://s019.radikal.ru/i621/1611/39/e5a30d5180bb.png: http://radikal.ru

Алексей Григорьев

Алексей Григорьев

10.11.2016 16:20 Ответить

По вашей ссылке ничего нет. Трудно так сказать если не видно кода или нет возможности открыть страницу в браузере. Возможно вам надо задать хедеру z-index: 1000. Если вы хотите сделать что то подобное http://demo.aweb34.ru/fixposition.html то z-index здесь не нужен, и float то же не используется

Алексей Григорьев

Алексей Григорьев

10.11.2016 16:25 Ответить

А нет, ссылка открылась. Попробуйте задать z-index больше чем у всех других элементов на странице.

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


Защитный код
Обновить