8-1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签的浮动</title>
	<style type="text/css">
	.father{
		background: #eee;
		border:1px dashed #999;
	}
	.box1,.box2,.box3{
		height:50px;
		line-height: 50px;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 10px;
		float: left;
	}
	.box1{background: #ff9;}
	.box2{background: #fc6;}
	.box3{background: #f90;}
	p{
		background: #ccf;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 1px;
	}
	</style>
</head>
<body>
<div class="father">
	<div class="box1">box1</div>
	<div class="box2">box2</div>
	<div class="box3">box3</div>
	<p>梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。</p>
</div>
</body>
</html>

8-2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
	.father{
		background: #ccc;
		border:1px dashed #999;
	}
	.box1,.box2,.box3{
		height: 50px;
		line-height: 50px;
		background: #f9c;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 10px;
		float: left;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
</body>
</html>

8-3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>空标签清除浮动</title>
	<style type="text/css">
	.father{
		background: #ccc;
		border:1px dashed #999;
	}
	.box1,.box2,.box3{
		height: 50px;
		line-height: 50px;
		background: #f9c;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 10px;
		float: left;
	}
	.box4{clear:both;}
	</style>
</head>
<body>
	<div class="father">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box4"></div>
	</div>
</body>
</html>

8-4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow清除浮动</title>
	<style type="text/css">
	.father{
		background: #ccc;
		border:1px dashed #999;
		overflow: hidden;
	}
	.box1,.box2,.box3{
		height: 50px;
		line-height: 50px;
		background: #f9c;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 10px;
		float: left;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
</body>
</html>

8-5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用after伪对象清除浮动</title>
	<style type="text/css">
	.father{
		background: #ccc;
		border:1px dashed #999;
	}
	.father:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0;
	}
	.box1,.box2,.box3{
		height: 50px;
		line-height: 50px;
		background: #f9c;
		border:1px dashed #999;
		margin:15px;
		padding: 0px 10px;
		float: left;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>
</body>
</html>

8-6

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签的定位</title>
	<style type="text/css">
	body{
		margin:0px;padding: 0px; font-size: 18px; font-weight: bold;
	}
	.father{
		margin: 10px auto;
		width: 300px;
		height: 300px;
		padding: 10px;
		background: #ccc;
		border:1px solid #000;
	}
	.child01,.child02,.child03{
		width: 100px;
		height: 50px;
		line-height: 50px;
		background: #ff0;
		border:1px solid #000;
		margin: 10px 0px;
		text-align: center;
	}
	.child02{
		position: relative;
		/*position: absolute;*/
		left:150px;
		top: 100px;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="child01">01</div>
		<div class="child02">02</div>
		<div class="child03">03</div>
	</div>
</body>
</html>

8-7


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子标签相对于直接父标签定位</title>
	<style type="text/css">
	.father{
		margin: 10px auto;
		width: 300px;
		height: 300px;
		padding: 10px;
		background: #ccc;
		border:1px solid #000;
		position: relative;
	}
	.child01,.child02,.child03{
		width: 100px;
		height: 50px;
		line-height: 50px;
		background: #ff0;
		border:1px solid #000;
		margin: 10px 0px;
		text-align: center;
	}
	.child02{
		position: absolute;
		left:150px;
		top: 100px;
	</style>
</head>
<body>
	<div class="father">
		<div class="child01">01</div>
		<div class="child02">02</div>
		<div class="child03">03</div>
	</div>
</body>
</html>

8-8

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overfiow属性</title>
	<style type="text/css">
	div{
		width: 260px;
		height: 176px;
		background:#eee center center no-repeat;
		overflow: visible;
		/*overflow: hidden;*/
		/*overflow: auto;*/
		/*overflow: scroll;*/
	}
	</style>
</head>
<body>
	<div>
	作为最近建立独立国家联合体这一局面的结果，我宣布辞去我作为苏维埃社会主义共和国联盟总统的职务。我一直以来坚决支持国家的独立、自主和加盟共和国的主权，但同时我也支持维护政权联合，国家统一。事态发展背离了初衷。即使我不能赞同的解体这个国家，分裂这个政局的政策仍然占了上风。在阿拉木图会议决议之后，我在这个方面的态度仍然没有改变。此外，我确信这一程度的决定应该建立在大众的期待和意愿的基础之上。
	</div>
</body>
</html>

8-9

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局</title>
	<style type="text/css">
	body{margin: 0;padding: 0;font-size:24px;text-align: center; }
	div{
		width: 980px;
		margin: 5px auto;
		background: #d2ebff;
	}
	#top{
		height: 40px;
	}
	#nav{height: 60px;}
	#banner{height: 200px;}
	#content{height: 200px;}
	#footer{height: 90px;}
	</style>
</head>
<body>
	<div id="top">头部</div>
	<div id="nav">导航栏</div>
	<div id="banner">焦点图</div>
	<div id="content">内容</div>
	<div id="footer">页面底部</div>
</body>
</html>

8-10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局</title>
	<style type="text/css">
	body{margin: 0;padding: 0;font-size:24px;text-align: center; }
	div{
		width: 980px;
		margin: 5px auto;
		background: #d2ebff;
	}
	#top{
		height: 40px;
	}
	#nav{height: 60px;}
	#banner{height: 200px;}
	#content{height: 200px;}
	.content_left{
		width: 350px;
		height: 200px;
		background-color: #ccc;
		float: left;
		margin: 0;
	}
	.content_right{
		width: 625px;
		height: 200px;
		background-color: #ccc;
		float: right;
		margin: 0;
	}
	#footer{height: 90px;}
	</style>
</head>
<body>
	<div id="top">头部</div>
	<div id="nav">导航栏</div>
	<div id="banner">焦点图</div>
	<div id="content">
		<div class="content_left">左</div>
		<div class="content_right">右</div>
	</div>
	<div id="footer">页面底部</div>
</body>
</html>

8-11


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
	body{margin: 0;padding: 0;font-size:24px;text-align: center; }
	div{
		width: 980px;
		margin: 5px auto;
		background: #d2ebff;
	}
	#top{
		height: 40px;
	}
	#nav{height: 60px;}
	#banner{height: 200px;}
	#content{height: 200px;}
	.content_left{
		width: 200px;
		height: 200px;
		background-color: #ccc;
		float: left;
		margin: 0;
	}
	.conten_middle{
		width: 570px;
		height: 200px;
		background-color: #ccc;
		float: left;
		margin:0 0 0 5px;
	}
	.content_right{
		width: 200px;
		height: 200px;
		background-color: #ccc;
		float: right;
		margin: 0;
	}
	#footer{height: 90px;}
	</style>
</head>
<body>
	<div id="top">头部</div>
	<div id="nav">导航栏</div>
	<div id="banner">焦点图</div>
	<div id="content">
		<div class="content_left">左</div>
		<div class="content_middle">中</div>
		<div class="content_right">右</div>
	</div>
	<div id="footer">页面底部</div>
</body>
</html>

8-12

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通栏布局</title>
	<style type="text/css">
	div{
		width: 980px;
		margin: 5px auto;
		background: #d2ebff;
	}
	#top{
		height: 40px;
	}
	#topbar{
		width: 100%;
		height: 60px;
		background-color: #3cf;
	}
	.nav{height: 60px;}
	#banner{height: 200px;}
	#content{height: 200px;}
	.inner{height: 90px;}
	#footer{
		width: 100%;
		height: 90px;
		background-color:#3cf;
	}
	</style>
</head>
<body>
<div id="top">头部</div>
<div id="topbar">
	<div class="nav">导航栏</div>
</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="foot">
	<div id="inner">页面底部</div>
</div>
</body>
</html>