Блоки выходят за границу другого блока

@galaid · Регистрация: 20.09.2011

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

Здраствуйте. Такая проблема: вложенные блоки выходят за границу блока, объединяющего их.

HTML5
1
2
3
4
5
6
7
<div id="catalog">
 
<div class="description">1</div>
<div class="description">2</div>
<div class="description">3</div>
 
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#catalog
{border:1px solid #0000ff;
border-radius:10px;
margin-bottom:5px;
margin-right:170px;
padding:5px;}
 
.description
{border:1px solid #0000ff;
border-radius:10px;
float:left;
margin-bottom:5px;
padding:5px;
width:30%;}

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

В чем проблема?

@sfc · 20.06.2012, 18:46

из-за float: left, применяемого к вложенным блокам, #catalog "теряет" высоту.

добавление

HTML5
1
<div style="clear: both"></div>

должно решить проблему.

@galaid · 20.06.2012, 19:15 **[ТС]**

sfc, дело в том, что вложенные блоки должны распологаться таким образом (по три в одном ряду). Нельзя ли сделать, чтобы высота главного блока зависела от вложенных? Или здесь лучше использовать таблицы?

@sfc · 20.06.2012, 19:30

Так они ведь и будут располагаться таким образом. Блок с clear добавляется последним и не должен повлиять на отображение

@galaid · 20.06.2012, 19:43 **[ТС]**

sfc, это помогло. Спасибо.
Только, на сколько я понял, это просто такая "обманка" для браузера?

@sfc · 20.06.2012, 20:03

Если честно, сам не так давно начал осваивать данную сферу, так что плохо ориентируюсь в подобных вопросах.
Наверное, можно сказать и так. Раньше понимал это таким образом: плавающий элемент "вырывается" из общего потока; clear отменяет действие float и высота контейнера равна высоте этого блока. Однако сейчас посмотрел, высота последнего блока (который с clear) равна 0. Так что без понятия почему так происходит, сам не против был бы узнать

@newJS · 20.06.2012, 20:35

Тайна свойства float CSS

@Inocs · 21.06.2012, 20:03

Добавь просто к стилю #catalog,

CSS
1
overflow: hidden;

и будет тебе счастье

P.S. В IE 6 это работать к сожалению не будет, но выход есть. Там же добавь еще "zoom:1;"

@konopro.ru · 24.06.2012, 11:00

если хотите что бы главный блок становился больше от того что в нем дате ему минимальную длину. вот так min-height:дпустим 1200px; а обычный height: не указывать; а и блоку задайте pagging-bottom

сколько надо отступа в пикселах);

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@galaid 289 / 34 / 6 Регистрация: 20.09.2011 Сообщений: 464
	20.06.2012, 19:15 [ТС]
	sfc, дело в том, что вложенные блоки должны распологаться таким образом (по три в одном ряду). Нельзя ли сделать, чтобы высота главного блока зависела от вложенных? Или здесь лучше использовать таблицы? 0

@sfc 36 / 36 / 28 Регистрация: 17.01.2012 Сообщений: 64
	20.06.2012, 19:30
	Так они ведь и будут располагаться таким образом. Блок с clear добавляется последним и не должен повлиять на отображение 1

@galaid 289 / 34 / 6 Регистрация: 20.09.2011 Сообщений: 464
	20.06.2012, 19:43 [ТС]
	sfc, это помогло. Спасибо. Только, на сколько я понял, это просто такая "обманка" для браузера? 0

@sfc 36 / 36 / 28 Регистрация: 17.01.2012 Сообщений: 64
	20.06.2012, 20:03
	Если честно, сам не так давно начал осваивать данную сферу, так что плохо ориентируюсь в подобных вопросах. Наверное, можно сказать и так. Раньше понимал это таким образом: плавающий элемент "вырывается" из общего потока; clear отменяет действие float и высота контейнера равна высоте этого блока. Однако сейчас посмотрел, высота последнего блока (который с clear) равна 0. Так что без понятия почему так происходит, сам не против был бы узнать 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	20.06.2012, 20:35
	Тайна свойства float CSS 0

@konopro.ru 0 / 0 / 0 Регистрация: 25.04.2012 Сообщений: 52
	24.06.2012, 11:00
	если хотите что бы главный блок становился больше от того что в нем дате ему минимальную длину. вот так min-height:дпустим 1200px; а обычный height: не указывать; а и блоку задайте pagging-bottomсколько надо отступа в пикселах); 0