Не подгоняется фон автоматически под объекты с свойством float

@Dimasio · Регистрация: 21.10.2012

Студворк — интернет-сервис помощи студентам

Добрый день!

В общем, возникла такая ситуация. Если один из блоков имеет свойство float, то под этот объект не подгоняется автоматически фоновая картинка/ Вот пример. Необходмо, чтобы фоновая картинка автоматически подгонялась под размеры блока с классом background. И автоматически у всего внутреннего содержимого делается padding сверху и снизу в 60p. В следующем коде фоновая картинка будет подгоняться только под h2, все остальное будет вылезать за пределы блока.

HTML5
1
2
3
4
5
<div class="background">
  <h2></h2>
  <div class="side-left"><div>
  <div class="side-right"><div>
</div>

CSS
1
2
3
.background {background-image: url(...); width: 940px; padding: 60 0;}
.side-left {float: left}
.side-left {float: right}

Есть один вариант, который решает проблему частично. Это сделать последний div в блоке с классом background не с float, а с margin-left. Тогда фоновая картинка будет охватывать все внутренние div. Но тут возникает проблема. Если side-left будет по размерам больше, чем side-right, то опять начнется каша. Можно конечно его сделать с margin. Но а если нужно сделать три колонки? там тоже возникает косяк, если 2 первых блока сделать с float: left, а последний с margin-left, то последний блок не выравнивается. Он вылетает на строку ниже.

В общем вопрос такой, что нужно прописать, чтобы фоновая картинка нормально охватывала блоки со свойством float без добавления в конец блока любого элемента без этого свойства?

@Crystal-3 · 02.10.2014, 12:07

Dimasio, когда используете свойство float нужно "обнулять" обтекание, чтоб родительский элемент не "схлопнулся". О том, как очищают обтекания можно почитать тут http://seodiz.ru/clear-float.
В вашем случае можно сделать так :

CSS
1
2
3
.background {
     overflow:hidden;
}

@Dimasio · 02.10.2014, 12:28 **[ТС]**

Crystal-3, с overflow: hidden ничего не меняется. За исключением того, что все блоки после <h2> будут скрыты!

Добавлено через 9 минут
Спасибо, но я думал, что можно как-то без лишних пустых элементов обойтись. С пустым обнуляющим div все работает

@Crystal-3 · 02.10.2014, 13:10

Сообщение от Dimasio

с overflow: hidden ничего не меняется. За исключением того, что все блоки после <h2> будут скрыты!

А вы пробовали? Блоки не будут скрыты.

Сообщение от Dimasio

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

Можно, вам нужно смотреть в сторону clearfix.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Dimasio 7 / 7 / 1 Регистрация: 21.10.2012 Сообщений: 232
	02.10.2014, 12:28 [ТС]
	Crystal-3, с overflow: hidden ничего не меняется. За исключением того, что все блоки после <h2> будут скрыты! Добавлено через 9 минут Спасибо, но я думал, что можно как-то без лишних пустых элементов обойтись. С пустым обнуляющим div все работает 0