Почему у тега div высоты нету?

Question

[Эдгар Балян]

Проблема в том что у дива с классом ellipse-group высота ровна 0 но почему? В нём же есть много контента почему его высота не ровно высоте контента внутри него?

<div class="ellipse-group">
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">5 минут</span> 
						до <br> центра
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">300 метров</span> 
						до <br> Волги
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Экологически <br> чистое <br> </span> 
						место
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бесплатная <br> кладовка <br> </span> 
						в подвале
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бесплатное <br> парковочное <br> место</span> 
					</p>
				</div>
				<div class="ellipse">
					<p class="ellipse__text">
						<span class="ellipse__word_bold">Бюджетная <br><span class="ellipse__word_small"> отделка под ключ:</span> <br> </span> 
						въехал и живи
					</p>
				</div>
			</div>

.ellipse {
    box-sizing: border-box;
    background: url(../img/section1/ellipse.png) no-repeat;
    width: 153px;
    height: 146px;
    float: left;
    text-align: center;
    padding: 40px 0;
}

.ellipse__text {
    font-size: 17px;
    padding-left: 7px;
}

.ellipse__word_bold {
    font-weight: 700;
}

.ellipse__word_small {
    font-size: 15px;
    font-weight: 700;
}

.ellipse:nth-child(1) {
    margin: 207px 50px 0px 10px;
    padding: 55px 0;
}

.ellipse:nth-child(2) {
    margin-top: 139px;
    margin-right: 45px;
    padding: 55px 0;
}

.ellipse:nth-child(3) {
    margin-top: 87px;
    margin-right: 50px;
}

.ellipse:nth-child(4) {
    margin-top: 87px;
    margin-right: 45px;
}

.ellipse:nth-child(5) {
    margin-top: 139px;
    margin-right: 50px;
}

.ellipse:nth-child(6) {
    margin-top: 207px;
    margin-right: 13px;
}

Comments

[Ankhena]

float частично выводят элемент из потока и родитель перестает знать о его размерах.
Поскольку у ellipse-group все дети имеют float, то его высота 0.

Для изменения этого поведения подставляют различные фу-фу-фу костылики типа clearfix или overflow.

В современном мире float используют только по назначению, для обтекания одного элемента другими (например, картинка текстом), а не для построения сеток.
Для ваших целей лучше подойдут flex или grid.

Answer 1

[spido]

overflow: hidden; может помочь?

Comments

[Эдгар Балян]

я пока еще не дошел о overfloow. как он применяеться?

[spido]

Эдгар Балян,
.ellipse-group {overflow: hidden;}

Answer 2

[AND]

.ellipse-group {
overflow: hidden;
}

Answer 3

[Сергей]

В инспекторе кода смотрю какие стили применены к твоему .ellipse-group
Я проверил твою разметку со стилями, всё отображается, высота .ellipse-group 353px