Один из способов “закрытия” плавающих блоков и FireFox
Стал практиковать один из способов “закрытия” плавающих блоков, который вот так выглядит в CSS:
1 2 3 4 5 6 7 8 9 | * 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: ‘.’, где вместо точки может стоять любой символ. Именно наличие символа и “распирает” блок, смещая его в ненужном направлении.
Баг лечится удалением символа между кавычек, т.е. вот так:
1 2 3 4 | #container:after { content: ''; ... } |
Можно было бы, конечно, добавить этому идентификатору еще одно свойство - font-size:0, но это уже лишний код.
* * *
Компания «Анкарус» предоставляет следующие услуги по городу Москве: перевозка пианино и роялей, квартир и офисов, мебели и домашних вещей, а также осуществляет погрузочно-разгрузочные работы (разборка, упаковка, разборка, установка).
А не легче ли вообще свойство content убрать?
[…]Dimox научил одному из способов “закрытия” плавающих блоков[…]
Хм… может быть и проще. Я даже об этом и не задумывался. В таком случае код сработает?
content специально добавляют чтобы контейнер не захлопывался.
Вот, поэтому я и спросил, останется ли код работоспособным. Теперь ясно. Значит удалять его нельзя.
С кодом в любом случае проблемы будут, но вот способ, описанный автором выше вполне работаспособен…
В помощь: Контейнер для float - блоков
А вообще можно после зафлоаченных блоков поставить
и будет все ок.
Правда это воттакенный прибор на семантику… хотя контейнер, тоже не слабый поклеп на семантику.
br режется ((
…после зафлоаченных блоков поставить br clear=”all”
… или <hr class=”clear” /> и в css указать hr.clear { clear: both }
Максим, вашу статью я прочитал еще, когда вы ее опубликовали и коммент тоже там оставлял :). От варианта, подобного br clear=”all” я уже стараюсь отказываться из-за семантики и лишнего html-кода, давно им пользуюсь. Пусть лучше вместо этого будет небольшой дополнительный CSS-код.
margin:0 !important;