Один из способов «закрытия» плавающих блоков и FireFox

Стал практиковать один из способов «закрытия» плавающих блоков, который вот так выглядит в CSS:

* html #container {height: 1%;}
#container:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	line-height: 0;
}

Используя данный этот метод, я при верстке заметил в браузере FireFox следующий баг, может быть кому-то пригодится эта информация.

Когда я прижимаю footer к низу окна браузера с помощью варианта с абсолютным позиционированием, в FF под этим футером появляется небольшой отступ, примерно в 5 пикселей. Сегодня в очередной раз встретился с этим багом, но уже в другой верстке. Отступ снова появился у элемента с position: absolute (на этот раз не футера).

Методом тыка выяснилось, что загвоздка заключалась в свойстве content: '.', где вместо точки может стоять любой символ. Именно наличие символа и «распирает» блок, смещая его в ненужном направлении.

Баг лечится удалением символа между кавычек, т.е. вот так:

#container:after {
	content: '';
	...
}

Можно было бы, конечно, добавить этому идентификатору еще одно свойство — font-size:0, но это уже лишний код.

* * *

Компания «Анкарус» предоставляет следующие услуги по городу Москве: перевозка пианино и роялей, квартир и офисов, мебели и домашних вещей, а также осуществляет погрузочно-разгрузочные работы (разборка, упаковка, разборка, установка).

Комментарии (10)
  1. 1
    Yuriy

    А не легче ли вообще свойство content убрать?

  2. 2

    Хм… может быть и проще. Я даже об этом и не задумывался. В таком случае код сработает?

  3. 3

    content специально добавляют чтобы контейнер не захлопывался.

  4. 4

    Вот, поэтому я и спросил, останется ли код работоспособным. Теперь ясно. Значит удалять его нельзя.

  5. 5
    Водила
    @

    С кодом в любом случае проблемы будут, но вот способ, описанный автором выше вполне работаспособен…

  6. 6

    В помощь: Контейнер для float — блоков
    А вообще можно после зафлоаченных блоков поставить

    <br clear="all">

    и будет все ок.
    Правда это воттакенный прибор на семантику… хотя контейнер, тоже не слабый поклеп на семантику.

  7. 7

    br режется ((
    …после зафлоаченных блоков поставить br clear=»all»

  8. 8

    … или


    и в css указать hr.clear { clear: both }

  9. 9

    Максим, вашу статью я прочитал еще, когда вы ее опубликовали и коммент тоже там оставлял :). От варианта, подобного br clear=”all” я уже стараюсь отказываться из-за семантики и лишнего html-кода, давно им пользуюсь. Пусть лучше вместо этого будет небольшой дополнительный CSS-код.

  10. 10
    seligozavr

    margin:0 !important;