页面布局需要注意每个元素区域所占大小，width 和 height 指的是内容区域的宽度和高度。元素框的实际大小应为width+两个内边距+两个border宽度+两个外边距。
clear 属性规定元素的哪一侧不允许其他浮动元素。
下图中页面布局遇到的问题是让蓝色区域的内容放置到黄色版块的下方。此时没有添加clear:left。
添加之后效果如下图，具体代码附在最后：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
background-color:yellow;
float:left;
width:160px;
margin:0;
padding:10px;
}
div.content
{
background-color:red;
margin-left:180px;
border-left:1px solid gray;
padding:1em;
}
.text{
background-color:blue;
float:left;
width:160px;
height:74px;
padding:0;
margin-left:0;
padding:10px;
clear:left;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">w3cschool.cn</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="text"><p>LJY </p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At w3cschool you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>w3cschool - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
