< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приемы верстки html-css » Фикс родительского блока, имеющего вложенные элементы с правилами «float»

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

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

Пост был обновлен: Апр 25, 2014

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

1
2
3

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

1
2
3

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

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

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

Пост был обновлен: Апр 25, 2014

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов
пока никто не проголосовал
Загрузка...

Проверка орфографии

Система Orphus

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

  • Максим Дек 03, 2014 в 7:09

    Спасибо огромное!

    • Заур Магомедов
      Заур Магомедов Дек 04, 2014 в 13:33

      Не за что!

  • Владимир Апр 24, 2014 в 10:10

    Здравствуйте Заур, Спасибо что ведете такой познавательный блог!

    • Заур Магомедов
      Заур Магомедов Апр 25, 2014 в 0:00

      Спасибо Вам за то, что посетили мой блог!

  • Георгий мая 08, 2013 в 21:35

    Хотя нет, тег не почистился, что вызвало небольшой сбой. Прошу прощения за «вторжение» в код страницы.

  • Георгий мая 08, 2013 в 14:30

    Способ, конечно, не слишком красив с точки зрения «правильного» кода, но работает. Хорошо бы суть написать, что работает с помощью добавления пустого блока со свойством clear:both. Тогда и с :after необязательно заморачиваться.
    P.S. Недели две назад прочитал Ваш блог с интересом, теперь всё это кажется очень простым. Будете публиковать сложные примеры?

    • Заур Магомедов
      Заур Магомедов мая 08, 2013 в 17:34

      Поверьте Георгий писать есть много о чем, в том числе и сложные примеры. Просто руки не доходят, все времени нет. Вот стараюсь как то решить эту проблему. За то, что читаете блог огромное Спасибо!!!

      • Георгий мая 08, 2013 в 21:18

        Заур, спасибо за ответ. Понятно что знания у вас немалые, глядя на ваши сайт (вы опубликовали тут ссылку на один из них) и блог. Просто нравится ваш стиль повествования.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]