Почему больше не разваливаются блоки?

Question

[▪ ▪]

Помню раньще если делаешь два блока, один float:left, другой right и выставляешь 48% по ширине, один блок наезжая на другой (при изменении размера браузера) перескакивал вниз. Это было настоящей проблемой, приходилось постоянно менять width в media screen. Почему сейчас нет такой проблемы? Браузеры изменились? Или что то я раньше не правильно делал?

Comments

[Антон Спирин]

Вы и сейчас что-то не так делаете, если так верстаете.
Если хотите сделать два следующих друг за другом блока по 50% ширины на float, то это делается примерно так:
css:

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  width: 50%;
}

html:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
</div>

Но лучше используйте flex.

[▪ ▪]

Антон Спирин, да но смысл от flex если и сейчас все стабильно с левым блоком и правым, они не наезжают друг на друга? Хотя раньше такая проблема была. Это так плохо делать один блок float:left а другой right?

[▪ ▪]

Антон Спирин, и вообще я слышал что flex еще очень ненадежен из за плохой поддержки браузерами особенно на мобильных.

[Антон Спирин]

Рикко, раньше у вас скорей всего была проблема с тем, что не было установлено правило box-sizing: border-box, а сейчас вы используете css фреймворк, normalize или reset, которые устанавлевют это правило для всех элементов.

*, *:before, *:after {
  box-sizing: border-box;
}

Задавать блокам float: left и float: right для построения сетки неправильно. Это и выглядит не очевидно, так как никто так не делает. Вдобавок вы определяете лишний, по-факту не нужный класс. И если строка будет вмещать в себя больше чем два элемента, при использовании нескольких блоков с float: right они будут строиться не в той последовательности в которой описаны в html коде.
Из всего вышеперечисленного можно сделать вывод, что лучше использовать только float: left для построения сетки на float.

Сейчас большинство компаний использует в продакшене именно flex. Используйте смело. Bootstrap 4 так же написан на flex.

[▪ ▪]

Антон Спирин, lда но flex делает резиновыми все вложенные в него divы а если у меня в right-block который вложен в content еще внутри left-block и right-block? right-block не будет находиться с права.

[Антон Спирин]

Рикко, flex делает то, что вы напишите, а в настройке он очень гибок.
Вопрос не понял. Но вот то, что я имел ввиду в комментарии выше. Обратите внимание на порядок элементов.

[Ankhena]

Помню раньще если делаешь два блока, один float:left, другой right и выставляешь 48% по ширине, один блок наезжая на другой (при изменении размера браузера) перескакивал вниз.

Если они 48% по ширине, то они не могли наезжать друг на друга при уменьшении окна браузера.
Это могло происходить только из-за контента внутри них, который не позволял блоку оставаться 48%, а растягивал его.
Сейчас произойдет тоже самое.

Используйте флексы :)

[▪ ▪]

Ankhena, да но если я не хочу чтобы внутри flex блока другие блоги наследовали свойства родителя и растягивались.

[Ankhena]

Рикко, то придется прочитать спецификацию и разобраться как ведут себя флексы и его дочерние элементы в зависимости от свойств родителя.