Властивість 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;
}

Повторіть сторінку за цим зразком: