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

А
На сайте с 27.08.2013
Offline
103
197

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

<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; Какие будут варианты?

Gerga
На сайте с 02.08.2015
Offline
94
#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>
Z0
На сайте с 03.09.2009
Offline
735
#2

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

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

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

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

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

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

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

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

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий