CSS-ში float თვისება და მშობელი ტექსტის გარეშე

ახლა დავუშვათ, გვაქვს div კლასით 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;
}

გაიმეორეთ გვერდი ამ ნიმუშის მიხედვით: