CSS-ում 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;
}

Կրկնեք էջն ըստ տրված նմուշի.