мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

Пусть теперь у нас есть див с классом 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; }

:

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

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