Блок не видит контент, почему?

Question

[ma4t]

Есть блок, в нем заголовок и ниже элементы на флоатах.
Так вот когда в панели разраба наводишь на главный блок, по высоте он показывает свое содержимое (то что СИНИМ цветом) , которое включает только заголовок. Т.е. элементы на флоатах как будто не видит. Это можно как-то исправить? Нужно margin-bottom от всего блока оттолкнуть нижние, но получается из-за того что содержимое не правильно отображается вместо margin-bottom 40px придется написать 400рх так как надо преодолеть содержимое внутри.

Жестко задавать высоту основному блоку тоже не варик, так как элементы внутри меняют свои размеры и положение по адаптивности...
Спасибо

Answer 1

[KononovD]

Есть такая штука clearfix называется

Создаём в css следующее :
.clearfix:after{
Content:"";
Display:table"
Clear:both;
}

И пишем этот класс ВСЕМ оберткам(контейнерам), ВНУТРИ которых есть float

Answer 2

[Roma741]

float делает елемент обтекаймым используйте clear:both; он осздаёт типо стенки которую обтикат нельзя

<div class="no_float">
       <h2 style="float:left;">text</h2>
      <div style="clear:both;"></div>
   </div>