html float, неправильно отображается верхний блок

110

Айратиус

14 июня 2020, 18:53

210

Всем добра. Всегда решал проблему, но криво. Решил докопаться до истины. Поясню на примере.

<style>
.main
{
	border:5px solid #000;
}
.block
{
	float:left;
	width:50%;
}
</style>

<div class="main">
    <div class="block">555</div>
    <div class="block">555</div>
</div>

В результате получается что рамка .main не становится вокруг .block (визуально)

Как делать правильно, чтобы визуально выглядело корректно?

Я же использую для .main display:flex; Какие будут варианты?

94

Gerga

14 июня 2020, 19:28

#1

Айратиус:
Я же использую для .main display:flex;

Вы не используете display:flex.

Айратиус:
Какие будут варианты?

как вариант, использовать display: flex ☝ или очистить float (clear: both, именно так делалось в допотопных до недавних времен).

---------- Добавлено 14.06.2020 в 22:30 ----------

Пример 1:


<style>
.main {
    border: 5px solid #000;
    display: flex;
}
.block {
    width: 50%;
}
</style>

Пример 2:


<style>
.main {
    border: 5px solid #000;
}
.block {
    float: left;
    width: 50%;
}
.main:after {
    content: '';
    display: block;
    clear: both;
}
</style>

DLE вывод короткой новости Гугл хром не в Вопросы по веб-строительству от

Z0

799

ziliboba0213

14 июня 2020, 19:58

#2

clear both, если я верно понял :)

S

469

Sitealert

15 июня 2020, 07:11

#3

Айратиус:
Решил докопаться до истины.
В результате получается что рамка .main не становится вокруг .block (визуально)

Потому что при float на высоту родительского блока не влияют дочерние элементы.

Варианты решения:

- задать высоту .main

- использовать clear: both

- использовать flex

- использовать для дочерних элементов display:inline-block (есть нюансы).

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Зачем быть уникальным в мире, где все можно скопировать

Курс биткоина превысил $50 тысяч