Почему блоки выходят за блок родителя?

Question

[Ingernirated]

Всем привет!
Подскажите пожалуйста, почему блоки не расположение в блоке родителя?
https://jsfiddle.net/1ry80L5w/

Answer 1

[Юрий]

Из-за свойства "float". Решения: применить к родительскому блоку хак clearfix, либо (лучше) использовать flexbox для выравнивания элементов.

Answer 2

[Eugene Chefranov]

Потому что используете float

Comments

[Ingernirated]

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

[Eugene Chefranov]

Ingernirated,
добавьте

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

[AngReload]

Ingernirated, вместо float можно использовать display: inline-block (но придётся убирать пробелы). Либо flexbox.

Answer 3

[Антон]

.block {
  width:100%;
  background-color:lightblue;
  display: table;
}