Всем привет! Данный небольшой пост предназначен скорее всего более или менее опытным верстальщикам, т.к. они сразу смогут понять о чем пойдет речь. А речь пойдет о родительском блоке, имеющий вложенные элементы, которым присвоено свойство float. Дело в том, что когда блок имеет такие элементы его высота слипается и получатся непонятно что: невозможно, например, задать рамку, добавить отступ по краям и т.д. Но вот я нашел решение и хочу поделиться им с вами.
Я долгое время для борьбы с данным «косяком» использовал свойство «overflow:hidden», но как показала практика данный метод не всегда удобен. Почему? Объясню. Представьте у вас есть родительский блок, внутри него лежат три блока которым присвоено правило в css «float:left». Данные блоки выстроятся в одну строку. Добавим родительскому элементу css-правило «overflow:hidden», чтобы наш блок не слипался. Теперь давайте добавим тень дочерним элементам со смещением — box-shadow:1px 1px 5px #999. В результате всего у нас тень обрежется, т.к. родительскому блоку указано — overflow:hidden. Это что касается тени вложенным элементам, а если вы хотите сместить определенные блок отрицательным отступом вверх или вниз? Блок также срежется. Вот такие вот последствия. Можете проверить.
А теперь о том, как этого всего избежать.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Данные правила копируем в файл стилей и далее можете просто добавить класс «clearfix» нужному блоку. Если класс у блока уже существует, то добавляете класс «clearfix» через пробел.
Для наглядности давайте посмотрим на пример. В первом примере мы не используем clearfix, а во втором используем. Разница видна невооруженным глазом.
Без clearfix
C использованием clearfix
Проверял работу фикса во всех популярных браузерах, включая ИЕ 7.0. В 6-ом ИЕ не проверял, т.к. для него я ставлю заглушку.
Ну вот и весь секрет. Я думаю данная инструкция многим пригодится, т.к. такое в верстке встречается довольно часто.
На этом разрешите отклониться. Всем удачи! Всем пока!
Загрузка...