floatがききません。clearfixをかける場所が間違っていますか？

ある模写をしています。
左側のnavの右側にピザを切ってる画像とその下のまとまりをもっていきたいです。

課題でfloatを使うルールです。
floatをかける場所が間違っていますか？
幅は余裕があるのでカラム落ちではないです。```

<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<title>レイアウト練習（ピザ）</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="wrap">
		

			<header>
				<img src="img/header.jpg" alt="トップ画像" class="top_pic">
			</header>

			<div class="section clearfix">
				<div class="nav01">
					<img src="img/navi_bg.jpg" alt="ナビの画像">
				</div>

			
				<div class="main">
					<img src="img/main.jpg" alt="ピザの画像" class="pizza_pic">
					<img src="img/menu_title.jpg" alt="メニューの画像" class="menu_pic">

					<div class="item clearfix">
						<img src="img/menu_01.jpg" alt="ピザの画像" class="pic">
						<div class="inner">
							<h2>生ハムとイタリア野菜</h2>
							<P>生ハム・パプリカ・ナス・ズッキーニ<br>(25cm)<span>1600円</span>(30cm)<span>2300円</span></P>
						</div>
					</div>

					<div class="item clearfix">
						<img src="img/menu_02.jpg" alt="ピザの画像" class="pic">
						<div class="inner">
							<h2>アンチョビーナ</h2>
							<P>アンチョビ・カマンベールチーズ・バジルソース<br>(25cm)<span>1700円</span>(30cm)<span>2400円</span></P>
						</div>
					</div>

					<div class="item clearfix">
						<img src="img/menu_03.jpg" alt="ピザの画像" class="pic">
						<div class="inner">
							<h2>地中海の恵み</h2>
							<P>エビ・イカ・ツナ・フレッシュトマト・ブラックオリーブ<br>(25cm)<span>1500円</span>(30cm)<span>2200円</span></P>
						</div>
					</div>

					<div class="item clearfix">
						<img src="img/menu_04.jpg" alt="ピザの画像" class="pic">
						<div class="inner">
							<h2>マルゲリータ</h2>
							<P>トマト・モッツァレラチーズ・ガーリック・バジル・ブラックペッパー<br>(25cm)<span>1500円</span>(30cm)<span>200円</span></P>
						</div>	
					</div>

					<div class="item clearfix">
						<img src="img/menu_05.jpg" alt="ピザの画像" class="pic">
						<div class="inner">
							<h2>スモークサーモンとアスパラ</h2>
							<P>スモークサーモン・アスパラ・ホワイトソース<br>(25cm)<span>1500円</span>(30cm)<span>2200円</span></P>
						</div>
					</div>

				</div>
			</div>	
			<footer>
				Copyright&copy; All Rights Reserved.
			</footer>
			

	
		
	</div>
</body>
</html>


コード

```@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: bottom;

}



/*背景の画像*/
body{
	background-image: url(../img/body_bg.jpg);
	font-size: 12px;

}



/* 中央の囲い*/
.wrap{
	width: 830px;
	margin: 0 auto;
	background-color: white;
}

/* ナビ*/
.nav01{
	float: left;
}


/*clearfix */
.clearfix::after{
	content: " ";
	display: block;
	clear: both;
}
/*main*/
.main{
	float: left;
}

/* item*/
 .item{
	width: 610px;
	height: 200px;
	border: 1px solid #ff6633;
	margin: 10px 0;
 }

/*h2 とｐ*/
.inner{
	float: left;
	padding: 10px;
	margin-right: 20px;
}
/*item中のh2 */
h2{
	border-top:1px solid #ff6633; 
	border-bottom:1px solid #ff6633; 
	width: 350px;

	
}



/*pic */
.pic{
	float: left;
	padding:15px;
}

/*span*/
span{
	font-weight: bold;
}

yambejp

2020/07/25 12:54

サンプルで付いている画像とソースが乖離しすぎていてどこをどうしたいのかわかりません

行動規範の内容に同意します

回答3件

画像が何pxかはわかりませんが、floatするものに幅を指定したほうが崩れにくいと思います。
課題を出した方には、floatをレイアウトに使うのは古すぎるので、gridとかを教えてもらいましょう。

CSS
1.nav01{
2    float: left;
3    width: 220px;
4}
5.main{
6    float: left;
7    width: 610px;
8}
9```**動くサンプル：**[https://jsfiddle.net/uj1b2748/](https://jsfiddle.net/uj1b2748/)