вход

Как автоматически выравнивать высоту блока содержащего плавающие элементы

Хитрости CSS которые вы должны знать

Рано или поздно, делая блочную верстку, вы можете столкнуться с проблемой высоты блока, который содержит плавающие блоки. По умолчанию высота блока содержащего плавающие блоки не увеличивается автоматически с увеличением высоты одного из блоков.

Предположим, что у вас есть блок wrapper внутри которого располагаются два блока со свойствами float:left.


<div id="wrapper"><!-- auto height -->
	<div id="col1"></div><!-- floating -->
	<div id="col2"></div><!-- floating -->
</div>

Неравная высота блоков

Есть три необычных и простых решения этой проблемы.

Решение 1

Не самое быстрое и элегантное решение, но самое простое. Чтобы блок, содержащий плавающие элементы автоматически изменял высоту, в соответствии с высотой внутренних блоков, просто добавьте абзац с текстом или пустой после этих блоков. Можно даже добавить пробел например <p>&nbsp;</p>


<div id="wrapper"><!-- auto height -->
	<div id="col1"></div><!-- floating -->
	<div id="col2"></div><!-- floating -->
    <p>просто текст</p>
</div>

Как автоматически выравнивать высоту блока

Решение 2

Добавьте также после плавающих блоков еще один элемент <div> или даже <br>, и назначьте ему класс очищающий свойство float


<div id="wrapper"><!-- auto height -->
	<div id="col1"></div><!-- floating -->
	<div id="col2"></div><!-- floating -->
    <div style="clear:both;"></div>
</div>

 

Как автоматически выравнивать высоту блока

Этот метод работает и является, пожалуй, самым используемым приемом при выравнивании высоты блока.

Решение 3

Очищаем свойство float на последнем плавающем блоке, используя правило в стилях для этого блока overflow: auto

#col2{
                display:block;
                /*float:left; убираем это свойство */
                overflow:auto;
                
}

 

Вот такие простые, но полезные надеюсь для начинающих подсказки. Если у вас есть тоже интересное решение, поделитесь со всеми в комментариях.

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Как автоматически выравнивать высоту блока содержащего плавающие элементы

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.