Фикс родительского блока, имеющего вложенные элементы с правилами «float»

Фикс родительского блока, имеющего вложенные элементы с правилами «float»

4 145 в Html5, Css3 9

Всем привет! Данный небольшой пост предназначен скорее всего более или менее опытным верстальщикам, т.к. они сразу смогут понять о чем пойдет речь. А речь пойдет о родительском блоке, имеющий вложенные элементы, которым присвоено свойство 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, а во втором используем. Разница видна невооруженным глазом.

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css

Без clearfix

1
2
3

C использованием clearfix

1
2
3

Проверял работу фикса во всех популярных браузерах, включая ИЕ 7.0. В 6-ом ИЕ не проверял, т.к. для него я ставлю заглушку.

Ну вот и весь секрет. Я думаю данная инструкция многим пригодится, т.к. такое в верстке встречается довольно часто.

На этом разрешите отклониться. Всем удачи! Всем пока!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Пока оценок нет)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории