Почему свойство float убирает background?

[Grani]

<ol class="app">
  <li><span>доставка от 2 дней</span></li>
  <li><span>скорость производства 600 м2/сутки</span></li>
  <li><span>гарантия от 5 лет</span></li>
</ol>

ol{
	background: #7A7A7A;
}
ol.app li{
	width: 100%;
	float: left;
}

https://jsfiddle.net/m1Lkwzuv/1/

Почему со стилем "float", свойство "background" не работает? если закомментировать "float", то заработает.

[AlexZaw]

  On 7/22/2019 at 5:34 PM, Grani said:

Почему со стилем "float", свойство "background" не работает?

Expand  

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

Вам поможет либо 

ol{
  background: #7A7A7A;
  overflow: hidden;
}

либо

ol:after{
  display: block;
  content: "";
  clear: both;
}

подробнее например тут http://www.css-tricks.ru/articles/css/all-about-floats