console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title>04_浮动后的影响</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.app {
			width: 600px;
			margin: 0 auto;
		}

       /* 清除浮动的负影响 */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

		.header {
			width: 600px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}

		.header-left {
			width: 120px;
		}

		.header-middle {
			width: 340px;
			margin: 0 10px;
		}

		.header-right {
			width: 120px;
		}

        /* 并集选择器 */
		.header-left,
		.header-middle,
		.header-right {
			background-color: gray;
			float: left;
		}


		.menu {
			width: 600px;
			height: 30px;
			background-color: gray;
			margin: 8px 0;
			text-align: center;
			line-height: 30px;
		}

		.bottom {
			width: 600px;
			height: 50px;
			background-color: gray;
			text-align: center;
			line-height: 50px;
		}

		.container {
			width: 600px;
			height: 220px;
			text-align: center;
		}

		.main {
			width: 464px;
			height: 220px;
			float: left;
		}

		.main-left {
			width: 227px;
			float: left;
		}

		.main-one {
			height: 100px;
            line-height: 100px;
			border: 1px solid black;
			margin: 0 0 10px 0;
		}

		.main-three {
			width: 108px;
			height: 100px;
            line-height: 100px;
			border: 1px solid black;
			float: left;
		}

		.main-four {
			width: 108px;
			height: 100px;
            line-height: 100px;
			border: 1px solid black;
			float: right;
		}

		.main-right {
			width: 227px;
			float: right;
		}

		.container-right {
			width: 120px;
			height: 220px;
			float: right;
		}

		.main-senve {
			width: 115px;
			height: 62px;
            line-height: 62px;
			border: 1px solid black;
			margin-bottom: 10px;
		}
	</style>
</head>

<body>
	<div class="app">
		<div class="header clearfix">
			<div class="header-left">logo</div>
			<div class="header-middle">banner1</div>
			<div class="header-right">banner2</div>
		</div>
		<div class="menu">菜单</div>
		<div class="container">
			<div class="main">
				<div class="main-left">
					<div class="main-one">栏目一</div>
					<div>
						<div class="main-three">栏目三</div>
						<div class="main-four">栏目四</div>
					</div>
				</div>
				<div class="main-right">
					<div class="main-one">栏目二</div>
					<div>
						<div class="main-three">栏目五</div>
						<div class="main-four">栏目六</div>
					</div>
				</div>
			</div>
			<div class="container-right">
				<div class="main-senve">栏目七</div>
				<div class="main-senve">栏目八</div>
				<div class="main-senve">栏目九</div>
			</div>
		</div>
		<div class="bottom">页脚</div>
	</div>
</body>

</html>