【CSS】float、flexbox、positionそれぞれのプロパティで同じレイアウトにする

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>

.content-body{
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}

/*親要素でclearfixしてfloatを解除する*/
<div class="content-body　clearfix">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>

.content-body{
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
 
	/*子要素の.content-boxにfloat:leftする*/
	float:left;
 
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
/*親要素用のclearfixを用意*/
.clearfix:after,.clearfix:before{
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	display: block;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下ではフロート解除*/
	.content-box{
		float:none;
		width:100%;
	}
}

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>

.content-body{
 
	/*親要素をdisplay:flexする*/
	display:flex;
 
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下ではフレックス解除、横幅100%に*/
	.content-box{
		display:block;
		width:100%;
	}
}

<div class="content-body">
	<div class="content-box"></div>
	<div class="content-box"></div>
	<div class="content-box"></div>
</div>

.content-body{
 
	/*親要素を相対対象にする*/
	position:relative;
 
	background-color:#ccc;
	width:100%;
	min-height:300px;
}
 
.content-box{
 
	/*子要素を絶対対象にする*/
	position:absolute;
	width:100px;
	height:100px;
	background-color:#999;
	border:1px solid #666;
}
 
.content-box:nth-child(1){
 
	/*子要素1番目の座標を設定*/
	top:0;
	left:0;
}
 
.content-box:nth-child(2){
 
	/*子要素2番目の座標を設定*/
	top:0;
	left:100px;
}
 
.content-box:nth-child(3){
 
	/*子要素3番目の座標を設定*/
	top:0;
	left:200px;
}
 
/*375px以下*/
@media only screen and (max-width:375px) {
 
	/*375px以下横幅100%に*/
	.content-box{
		width:100%;
	}
	/*375px以下では縦並びになるように調整*/
	.content-body .content-box:nth-child(1){
		top:0;
		left:0;
	}
 
	.content-body .content-box:nth-child(2){
		top:100px;
		left:0;
	}
 
	.content-body .content-box:nth-child(3){
		top:200px;
		left:0;
	}
}