# Свойство float и родитель без текста в CSS

Пусть теперь у нас есть див с классом `parent` без текста, но с двумя блоками-потомками с классом `child`:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> </div>` `.parent { width: 500px; border: 1px solid red; text-align: justify; } .child { width: 200px; height: 100px; border: 1px solid green; }`

:

Давайте сделаем блоки-потомки плавающими слева и посмотрим, что будет:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> </div>` `.parent { width: 500px; border: 1px solid red; text-align: justify; } .child { float: left; width: 200px; height: 100px; border: 1px solid green; }`

:

Как мы видим, блоки-потомки выстроились в ряд, однако, высота родителя пропала и наши блоки высунулись за него вниз.

Такое поведение нам уже известно. Для решения проблемы следует использовать клиарфикс. Сделаем это:

`<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="clearfix"></div> </div>` `.parent { width: 500px; border: 1px solid red; text-align: justify; } .child { float: left; width: 200px; height: 100px; border: 1px solid green; } .clearfix { clear: both; }`

:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

← →
↑