Персональный блог Александра Мокрова

О работе и отдыхе

Кроссбраузерная альтернатива свойства clear в CSS

CSS3 is awesome
Часто бывает, что нужно отменить обтекание картинки или блока (css float) внутри другого блока, но при этом не отменять обтекание наружного блока. Например отменить обтекание картинки в центральном блоке, но при этом «не трогать» левую колонку сайта, сделанную также через float.

Стандартно для этого придумано свойство clear. Однако не во всех браузерах оно работает одинаково, и в некоторых случаях оно ошибочно отменяет обтекание и для родительских блоков, что может испортить верстку.

В таком случае можно использовать следующий вариант:

<style type="text/css">
.clearer {
  width: 100%;
  overflow: hidden;
}
.clearer span {
  float: left;
}
</style>

......................................................

<!-- где-то на странице -->
<div class="clearer"><span></span><span></span></div>

......................................................

1 Комментарий

1 Комментарий

  1. Валера Март 14th, 2013 15:17

    Пиши в документаторе – лучше востребовано будет.

Оставить комментарий